Understanding Hoisting in JavaScript

With all this talk about ES6 and block scoping with let and const, I thought it would be a good idea to talk about hoisting in JavaScript.

This won’t be a thorough exposition. You can find a great deal of information on GitHub. What I want to do is give the basics.

There are three parts to the compiler:

The interpreter takes this statement and breaks it up into what are called tokens. To the interpreter, this statement and its tokens are var, b, =, and 10.

The engine part of the interpreter will compile these tokens into an array and subsequent tree of nested elements to execute. The code is compiled right before it is executed.

Dictionary.com definition of hoist:

to raise or lift, especially by some mechanical appliance:

to hoist a flag; to hoist the mainsail. You can think of hoisting a variable as lifting it to the top of whatever scope it is in.

The difference here is that JavaScript hoists declarations and leaves the initializations at the bottom of the scope.

Example:

[javascript]

console.log(foo);

var foo = 3;

[/javascript]

Take this statement:

var foo = 3;

JavaScript looks at this and sees:

var foo; and foo = 3;

The first part of the statement is compiled, the second part is executed. It is then compiled as:

[javascript]

var foo;

console.log(foo);

foo = 3;

[/javascript]

As you can see, the declaration in this scope is the only thing that was “raised” to the top of the scope. The initialization remains at the bottom.

With all this talk about ES6 and block scoping with let and const, I thought it would be a good idea to talk about hoisting in JavaScript.

This won’t be a thorough exposition. You can find a great deal of information on GitHub. What I want to do is give the basics.

There are three parts to the compiler:

The interpreter takes this statement and breaks it up into what are called tokens. To the interpreter, this statement and its tokens are var, b, =, and 10.

The engine part of the interpreter will compile these tokens into an array and subsequent tree of nested elements to execute. The code is compiled right before it is executed.

Dictionary.com definition of hoist:

to raise or lift, especially by some mechanical appliance:

to hoist a flag; to hoist the mainsail. You can think of hoisting a variable as lifting it to the top of whatever scope it is in.

The difference here is that JavaScript hoists declarations and leaves the initializations at the bottom of the scope.

Example:

[javascript]

console.log(foo);

var foo = 3;

[/javascript]

Take this statement:

var foo = 3;

JavaScript looks at this and sees:

var foo; and foo = 3;

The first part of the statement is compiled, the second part is executed. It is then compiled as:

[javascript]

var foo;

console.log(foo);

foo = 3;

[/javascript]

As you can see, the declaration in this scope is the only thing that was “raised” to the top of the scope. The initialization remains at the bottom.

I encourage you to check out the link I linked to above. Kyle Simpson is an amazing teacher and I’ve learned so much from the YDKJS series. You can find the free version on GitHub.