Hoisting

JavaScript hoists declarations. This means that both var statements and function declarations will be moved to the top of their enclosing scope.

bar();
var bar = function() {};
var someValue = 42;

test();
function test(data) {
    if (false) {
        goo = 1;

    } else {
        var goo = 2;
    }
    for(var i = 0; i < 100; i++) {
        var e = data[i];
    }
}

The above code gets transformed before execution starts. JavaScript moves the var statements, as well as function declarations, to the top of the nearest surrounding scope.

// var statements got moved here
var bar, someValue; // default to ‘undefined‘

// the function declaration got moved up too
function test(data) {
    var goo, i, e; // missing block scope moves these here
    if (false) {
        goo = 1;

    } else {
        goo = 2;
    }
    for(i = 0; i < 100; i++) {
        e = data[i];
    }
}

bar(); // fails with a TypeError since bar is still ‘undefined‘
someValue = 42; // assignments are not affected by hoisting
bar = function() {};

test();

Missing block scoping will not only move var statements out of loops and their bodies, it will also make the results of certain if constructs non-intuitive.

In the original code, although the if statement seemed to modify the global variable goo, it actually modifies the local variable - after hoisting has been applied.

Without knowledge of hoisting, one might suspect the code below would raise a ReferenceError.

// check whether SomeImportantThing has been initialized
if (!SomeImportantThing) {
    var SomeImportantThing = {};
}

But of course, this works due to the fact that the var statement is being moved to the top of the global scope.

var SomeImportantThing;

// other code might initialize SomeImportantThing here, or not

// make sure it‘s there
if (!SomeImportantThing) {
    SomeImportantThing = {};
}

Name Resolution Order

All scopes in JavaScript, including the global scope, have the special name this, defined in them, which refers to the current object.

Function scopes also have the name arguments, defined in them, which contains the arguments that were passed to the function.

For example, when trying to access a variable named foo inside the scope of a function, JavaScript will look up the name in the following order:

1. In case there is a var foo statement in the current scope, use that.
2. If one of the function parameters is named foo, use that.
3. If the function itself is called foo, use that.
4. Go to the next outer scope, and start with #1 again.

Note: Having a parameter called arguments will prevent the creation of the default arguments object.

(function() {
    // a self contained "namespace"

    window.foo = function() {
        // an exposed closure
    };

})(); // execute the function immediately

( // evaluate the function inside the parentheses
function() {}
) // and return the function object
() // call the result of the evaluation

// A few other styles for directly invoking the 
!function(){}()
+function(){}()
(function(){}());
// and so on...

var list = [1, 2, 3, 4, 5, ...... 100000000];
for(var i = 0, l = list.length; i < l; i++) {
    console.log(list[i]);
}

var foo = [1, 2, 3, 4, 5, 6];
foo.length = 3;
foo; // [1, 2, 3]

foo.length = 6;
foo.push(4);
foo; // [1, 2, 3, undefined, undefined, undefined, 4]

[1, 2, 3]; // Result: [1, 2, 3]
new Array(1, 2, 3); // Result: [1, 2, 3]

[3]; // Result: [3]
new Array(3); // Result: []
new Array(‘3‘) // Result: [‘3‘]

var arr = new Array(3);
arr[1]; // undefined
1 in arr; // false, the index was not set

new Array(count + 1).join(stringToRepeat);