Grauw’s blog

The way JavaScript interprets the var and function statements can be confusing. Intuitively, you would think the statements are processed in the order that they appear. However, for var and function this is not the case. I’ll try to give some clarification.

Let’s start with function. First we need to clarify the difference between a function declaration and a function expression. A function is called a function declaration when it appears like so:

function aaa() {}

A function is a function expression when it is used as part of an expression. Makes sense, no? :) Some examples:

var bbb = function() {}

ccc = function ddd() {}

Now before the JavaScript interpreter runs any code, it will start with gathering all function declarations. It creates local variables with their names, and assigns the compiled function objects to them. This means that function declarations can be called before they are declared, while function expressions can not.

Next, the interpreter will gather all var statements and create local variables for them. It will not initialize them yet though, the value will be undefined until the var statement is reached in normal execution of the code, which begins after this.

For example, the following code looks like it may have some issues. ccc is called before it’s defined, and you would think that if it is called ccc alerts “bbb is function”, not undefined. And if var aaa appears after the assignment, would aaa not be set on the global object instead of locally?

function test() {

    ccc();

    aaa = true;

    var bbb = function() {
        alert('window.aaa is ' + window.aaa); // alerts “window.aaa is undefined”
    };

    function ccc() {
        alert('bbb is ' + bbb); // alerts “bbb is undefined”
    }

    var aaa;

    bbb();

}

In reality this code is executed as if it were this:

function test() {

    var ccc = function() {
        alert('bbb is ' + bbb); // alerts “bbb is undefined”
    };

    var bbb = undefined;
    var aaa = undefined;

    ccc();

    aaa = true;

    bbb = function() {
        alert('window.aaa is ' + window.aaa); // alerts “window.aaa is undefined”
    };

    bbb();

}

So first ccc is defined as a local variable, then it is assigned the corresponding function object, then variables bbb and aaa are created and set to undefined, and after that the body continues to execute in code order, executing ccc (which is now available), assigning aaa and bbb their values and executing the latter.

Because of this you can do things in JavaScript which seem odd at first, but in practice are often very convenient, especially in combination with closures.

If you want to look up the details, see section 10.5 “Declaration Binding Instantiation” of the ECMAScript 5 specification.