Introduction

Before we talk about hoisting, I think it is important to understand how the JavaScript engine looks at the code, interprets, and runs it. Once we understand this, hoisting becomes straightforward to explain.

Execution Context

JavaScript engine breaks up the code into smaller segments to manage the complexity of interpreting and running it. If I have to explain this easier, think about a scenario where you attempt to write a web application. Your application typically would comprise of modules, functions, variable declarations, etc. Essentially, you have broken down the application into logical pieces in order to understand, maintain, and debug it.

Just like how modules, functions, etc. allow you to manage program complexity, Execution Context is the JavaScript engine's way to manage the complexity of interpreting the code. Hope makes things a little clearer.

Global Execution Context

The first execution context that gets created when the JavaScript engine runs your code is called the “Global Execution Context”. Initially, this Execution Context will consist of two things - a global object and a variable called 'this'.

The above image represents the global execution in the most basic form. The 'this' keyword references the global object which is the 'window' object.

Creation & Execution Phases

Now that we understand the global execution context, let us understand the two phases that exist while running any JavaScript program.

Let us consider the following code example:

var fruit = apple;

function getFruit() {
	return fruit;
}

Creation Phase

The below diagram depicts how the Global Execution Context looks during the creation phase.

In the Global Creation phase, the JavaScript engine will:

1. Create a global object.
2. Create an object called “this”.
3. Set up memory space for variables and functions.
4. Assign variable declarations a default value of “undefined” while placing any function declarations in memory.

Execution Phase

The below diagram depicts how the Global Execution Context looks during the execution phase.

In the Global Execution Phase, the JavaScript engine will:

1. Starts running the code line by line.
2. Assigns the 'real' values to the variables already present in the memory.

Now that we've understood the creation & execution phases, let us take another example and look at the output on the console.

console.log(`The fruit is ${fruit}`);
console.log(`The color is ${color}`);

var fruit = 'apple';
var color = 'red';

function getFruit() {
    return fruit;
}

function getColor() {
    return color;
}

//Output
//The fruit is undefined
//The color is undefined

Things to note:

• During the creation phase, the variables 'fruit' & 'color' are initialized with the values 'undefined'.
• Hence when the console.log statement is encountered, the value 'undefined' is printed on the console.

Hoisting

The process of assigning variable declarations a default value of 'undefined' during the creation phase is called Hoisting.

The thing that’s confusing about “hoisting” is that nothing is actually “hoisted” or moved around. A lot of other explanations out there talk about how the code variables and functions are moved up the stack before execution without clearly talking about the creation and execution phases in the execution context.

A quick example of the below code will make sense after understanding hoisting.

//The Variable x is initialized
x = 5;

//Output the value of x multiplied by 2 on the console
console.log(x * 2);

//The variable x is declared over here
var x;

//Output -> 10

In the above code example, you would notice that the variable 'x' is initialized in the first statement and then in the last statement there's a declaration of x. But, when the JavaScript engine is in the creation phase, it moves up the declaration statement to the top of the stack and hence the above program would look like below when the JavaScript engine runs it.

//The variable x is declared over here
var x;

//The Variable x is initialized
x = 5;

//Output the value of x multiplied by 2 on the console
console.log(x * 2);

//Output -> 10

Ideally, I would have expected the JavaScript engine to throw an error for using a variable before it has been declared, but thanks to ES6, this problem has been addressed with let & const. You can learn more about let & const over here.

What is not Hoisted?

While it might appear that the variable declarations using let & const are not hoisted. There is a subtle difference, which I will try to explain.

The Variable declarations (variable name bindings to memory) with let and const are hoisted, but not their definitions (i.e. function definitions). Hence, they cannot be accessed for any read/write operations before their first assignment (initialization).

Let me try and explain the above concept using the code example below:

// console will return Uncaught ReferenceError: randomVar is not defined
console.log(randomVar); 

// console will return Uncaught ReferenceError: Cannot access 'hoistedVar' before initialization
console.log(hoistedVar); 

function log() {
    // console will not return any error as this line isn't actually executed yet, so hoistedVar is not being accessed
  console.log(hoistedVar); 
}

// console will return Uncaught ReferenceError: Cannot access 'hoistedVar' before initialization
log(); 

// The hoistedVar is initialized here
let hoistedVar = "Hi";

// console will log "Hi"
log(); 

Important to note:

• The ReferenceError from trying to access the hoisted "let" variable declaration is different than the ReferenceError from trying to access a variable that has not been declared.

To reiterate, all variable declarations are hoisted, but the 'let' and 'const' variable declarations will give a ReferenceError if the variable is accessed before being initialized.

In addition, 'Arrow Functions' are not hoisted by the JavaScript engine.

Conclusion

Hoisting is nothing but the process of assigning variable declarations a default value of 'undefined' during the creation phase.

I would suggest that now that you immediately jump to my article on Closures since it's a continuation of the concepts described in this article. You can read it over here.

I hope you enjoyed this article. Do connect with me on Twitter @skaytech