Scope & Closures Chapter 4

YDKJSY Scope & Closures

Chapter 4 : Hoisting

When you strive to comprehend your code, you create better work and become better at what you do. The code isn’t just your job anymore, it’s your craft.― Kyle Simpson

Click to view full text

Chicken Or The Egg?

There's a temptation to think that all of the code you see in a JavaScript program is interpreted line-by-line, top-down in order, as the program executes.

consider this code

a = 2;

var a;

console.log( a );

What do you expect to be printed in the console.log(..) statement?

Many developers would expect undefined, since the var astatement comes after the a = 2, and it would seem natural to assume that the variable is re-defined, and thus assigned the default undefined. However, the output will be 2.

consider another code

console.log( a );

var a = 2;

Some may think that since the a variable is used before it is declared, this must result in a ReferenceError being thrown.

But here undefined is the output.

So, what's going on here? It would appear we have a chicken-and-the-egg question. Which comes first, the declaration ("egg"), or the assignment ("chicken")?

The Compiler Strikes Again

When you see var a = 2;, you probably think of that as one statement. But JavaScript actually thinks of it as two statements: var a; and a = 2;. The first statement, the declaration, is processed during the compilation phase. The second statement, the assignment, is left in place for the execution phase.

Our first snippet then should be thought of as being handled like this:

First Snippet

a = 2;

var a;

console.log( a );

Compilation

var a;

Execution

a = 2;

console.log( a );

Similarly, our second snippet is actually processed as:

Second Snippet

console.log( a );

var a = 2;

Compilation

var a;

Execution

console.log( a );

a = 2;

So, one way of thinking about this process, is that variable and function declarations are "moved" from where they appear in the flow of the code to the top of the code. This gives rise to the name "Hoisting".

Note: Only the declarations themselves are hoisted, while any assignments or other executable logic are left in place.

observe

foo();

function foo() {
console.log( a ); // undefined

var a = 2;
}

The function foo's declaration is hoisted, such that the call on the first line is able to execute.

It is important to note that hoisting is per-scope.

So this program can be more accurately interpreted like this:

interpreted as:

function foo() {
  var a;

  console.log( a ); // undefined

  a = 2;
}

foo();

Function declarations are hoisted, as we just saw. But function expressions are not.

example

foo(); // not ReferenceError, but TypeError!

var foo = function bar() {
// ...
};

The variable identifier foo is hoisted and attached to the enclosing scope (global) of this program, so foo() doesn't fail as a ReferenceError. But foo has no value yet (as it would if it had been a true function declaration instead of expression). So, foo() is attempting to invoke the undefinedvalue, which is a TypeError illegal operation.

Also recall that even though it's a named function expression, the name identifier is not available in the enclosing scope:

observe

foo(); // TypeError
bar(); // ReferenceError

var foo = function bar() {
// ...
};

This snippet is more accurately interpreted (with hoisting) as:

interpreted as:

var foo;

foo(); // TypeError
bar(); // ReferenceError

foo = function() {
var bar = ...self...
// ...
}

Functions First

Both function declarations and variable declarations are hoisted. But a subtle detail (that can show up in code with multiple "duplicate" declarations) is that functions are hoisted first, and then variables.

consider

foo(); // 1

var foo;

function foo() {
console.log( 1 );
}

foo = function() {
console.log( 2 );
};

This snippet is interpreted by the Engine as:

interpreted as:

function foo() {
console.log( 1 );
}

foo(); // 1

foo = function() {
console.log( 2 );
};

Notice that var foo was the duplicate (and thus ignored) declaration, even though it came before the function foo() declaration, because function declarations are hoisted before normal variables.

While multiple/duplicate var declarations are effectively ignored, subsequent function declarations do override previous ones.

example

foo(); // 3

function foo() {
  console.log( 1 );
}

var foo = function() {
  console.log( 2 );
};

function foo() {
  console.log( 3 );
}

Function declarations that appear inside of normal blocks typically hoist to the enclosing scope, rather than being conditional as this code implies:

consider

foo(); // "b"

var a = true;
if (a) {
function foo() { console.log( "a" ); }
}
else {
function foo() { console.log( "b" ); }
}

However, it's important to note that this behavior is not reliable and is subject to change in future versions of JavaScript, so it's probably best to avoid declaring functions in blocks.

YDKJSY Scope & Closures Chapter 4 Hoisting