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.
The JavaScript Interpreter
There are parts to the JavaScript compiler you’d need to understand to get a grip on what happens when a variable is hoisted or lifted to the top of a scope.
There are three parts to the compiler:
- The Engine
- Compiler
- Scope
Looking at this statement: var b = 10, you’re probably assuming this is one statement, and that the JavaScript interpreter sees it the same way. It doesn’t.
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.
What is Meant by Hoisting?
I am assuming here that you know what scope is, as I have talked about block scoping before with the same assumption. If you don’t, I’ll cover it in more detail another time. For now, I am just going to focus on hoisting.
Dictionary.com definition of hoist:
verb (used with object)1. 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.
Just the Basics
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.
The JavaScript Interpreter
There are parts to the JavaScript compiler you’d need to understand to get a grip on what happens when a variable is hoisted or lifted to the top of a scope.
There are three parts to the compiler:
- The Engine
- Compiler
- Scope
Looking at this statement: var b = 10, you’re probably assuming this is one statement, and that the JavaScript interpreter sees it the same way. It doesn’t.
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.
What is Meant by Hoisting?
I am assuming here that you know what scope is, as I have talked about block scoping before with the same assumption. If you don’t, I’ll cover it in more detail another time. For now, I am just going to focus on hoisting.
Dictionary.com definition of hoist:
verb (used with object)1. 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.
Just the Basics
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.
