JS101 - Scope

Javascript is pretty simple, but brilliant. There is usually not 'a way to do it' in javascript, you get the basic toolkit and can do with it what you want.

I'm working on the part of my resume which says I am good at explaining things... it doesn't exist yet. So I will attempt to give Javascript 101 through to intermediate... and maybe even advanced.

So firstly, Variable Scope. Consider the following:

var s = 0;

function addToS() {
    s = s + 1;
}

console.log(s);  // = 0

addToS();

console.log(s);  // = 1

Simple enough. There is one single global variable 's' which gets added to.

var s = 0;

function addToS() {
    var s;
    s = s + 1;
}

console.log(s);  // = 0

addToS();

console.log(s);  // = 0

Still easy. There are now two 's' variables, one global and one within the scope of the function 'addToS'.

Now when addToS runs, it actually only adds to it's LOCAL copy of s, leaving the global s alone.

This next one is a little strange:

var s = 0;

function addToS() {
    s = s + 1;
    var s;
}

console.log(s);  // = 0

addToS();

console.log(s);  // = 0

Yep, still 0.

Even though the variable declaration (var s) happened AFTER s = s + 1, having the declaration ANYWHERE in the function causes it to be a 'Local Scope' variable.

What about Arguments. Are they 'passed by reference' or 'passed by value'. Let's see.

var s = 0;

function addToS(b) {
    b = b + 1;
}

console.log(s); // 0

addToS(s);

console.log(s) // Still 0

So the change to 'local' in 'addToS' had no effect on the variable outside of the function

• that's called 'passed by value' - the Value of s was sent to the function. However:

var s = {
    a: 0
};

function addToS(ob) {
    ob.a = ob.a + 1;
}

console.log(s.a); // 0

addToS(s);

console.log(s.a) // 1

When passing an Object to a function, it is passed by reference, so changes to the object are reflected in all references to that object.

But what's an object?

There are two basic types of thing in javascript: Objects and Arrays

An Object is something like:

title:  'book on all things'
author: 'bob'
pages:  140

Which in javascript is written in {}, like so:

var AssociativeArray = {
    'title': 'book on all things',
    'author': 'bob',
    'pages': 140
};

Where an Array is just a list of things without names:

'book on all things'
'another book'
'the best book ever'

Which looks like this in javascript:

var NonAssociativeArray = [
  'book on all things',
  'another book',
  'the best book ever'
];

Both Arrays and Objects have 'properties', which are numbers for Arrays, and strings for Objects.

var A = {
    v: 100
};

console.log(A.v);
console.log(A['v']);

var NA = [
  'first',
  'second'
];

console.log(NA[0]); // first
console.log(NA[1]); // second

Did you notice A['v'] there?

Remember how I said that there are two types of thing in JavaScript... yeah, Lied. Soz. There's only one: Object. There's just two different ways of defining them. These two are exactly the same:

var ObjA = {
      0: 'first',
      1: 'second'
    }
    var ObjB = [
      'first',
      'second'
    ]

All 'properties' can be accessed by obj['key'], and most by obj.key

Most, not all? Only because using obj.key can't start with a number - obj.0 and obj.0key are both invalid, but other than that, we're solid.

NA[3] = "third";
console.log(NA[3]); // third
NA['string'] = "Na's String";
console.log(NA['string']);
console.log(NA.string);

A[0] = 'Zero';
console.log(A[0]);
// Don't do this > console.log(A.0);
//  or this      > console.log(NA.0);

Excited about javascript?