Variable Hoisting in JavaScript

Introduction

Hoisting is one of the most interesting and important topics in JavaScript to understand how different variables, function, classes declarations and definitions behave in a JavaScript program.
For someone new to JavaScript with no prior experience hoisting can be a confusing as most languages don't handle variable and function declarations the way javascript does and it requires some knowledge of how the JavaScript Engine behaves during code execution to understand Hoisting.
Hoisting along with Thread of Execution, Scope, Closures is also one of the most popular topics in web dev interviews for entry level jobs.

Prerequisites

To understand hoisting one should have some knowledge of thread of execution, Execution Context and what are creation phase & execution phase in JavaScript.

What is hoisting?

Hoisting is storing the variables declared in the code into the memory when the code execution is in the creation phase. Variables, functions, etc. are all stored in the memory to be available to use when the execution phase begins.

Hoisting moves all the variables and functions declarations to the top of their scope to make them available to use before they are even declared

we can understand the above statements by looking at the below examples -

We'll go through all three of these and try to understand what's happening here. The knowledge of creation and execution phase will come in handy here.

1. In the first example the following explains why undefined is logged :

• The javascript engine reaches the declaration var helloWorld it hoists it into the memory and there's a default behaviour in which the var declarations are hoisted i.e., they are hoisted by assigning them value of undefined during the creation phase.

• The line console.log(helloWorld) being a function call doesn't get hoisted.

• When we come in the execution phase the function call to log the value of helloWorld variable prints the value as undefined since it was hoisted as undefined in the creation phase.

2. For the second example the result is undefined too :

• In creation phase first line being a function call is not hoisted. We reach the variable declaration var helloWorld = 'Hello World' which is hoisted but now we come to an important point.

Initialisations are not hoisted during the creation phase only declarations are.

• As JS Engine hoists var declarations with a value of undefined the variable will be hoisted with a value of undefined and not Hello World!.

• The reason why console.log(helloWorld) prints undefined is that when we're in the execution phase and reach line one the initialization has not taken place yet for our helloWorld variable so we're reading it before its initialized meaning it's value is still undefined as we log it.

3. The third example will make things more clear about how hoisting works and what happens during creation and execution phase :

• In the creation phase helloWorld gets hoisted with a value of undefined.

• Now in the execution phase the first console.log will print undefined as we've already seen in example 2.

• The execution reaches line 2 where we've initialized the value of helloWorld to Hello World! so the value for our variable helloWorld changes from undefined to Hello World! here.

• The line prints the message Hello World because we've initialized the value of our variable before the last console.log.

From Above examples we've made the below observations :

• Variables are available to use before initialising/assignment of a value in the execution phase.
• initializations are not hoisted during creation phase so only the default value of undefined got assigned to our variable even though we initialized it in example 3.
• In the execution phase a variable will only be assigned a value when it reaches the part of code where its being initialized and not before that.

How Hoisting is different for Var, let & Const ?

The difference between hoisting of a var declarations with those of let and const declarations is that var is hoisted in memory with an actual value i.e., undefined.

let declarations :

• These are allocated memory during the creation phase but not initialized with any value, keeping them in memory as empty boxes that contain no value before they've been initialized in the excecution phase.
• In the execution phase when a let variable is read before its initialization then the variable will be assigned a value of undefined as we can see from the result of first console.log in example #2 in the below image.

const declarations :

• These declarations should always be initialized before they are used as they never get assigned a value of undefined like let declarations are assigned in the execution phase making them always throw an error if not assigned a value while declaring them.

That's it for this post 👏🏻.
Thanks for reading this post. Please post feedback, ask questions if any related to this topic.