Header Ads Widget

Understand Hoisting in JavaScript

 


Understand "Hoisting" in JavaScript is important and at the same time somewhat misleading. In this blog post, I will cover the Hoisting concept. This is a process that happens while the JavaScript engine interprets the written JavaScript code.

Note - I am sharing all my JavaScript Developer Certification study notes here. Please provide your feedback if you see anything wrong or missing. Appreciate.

In the blog post, I will be discussing -

  • The way JavaScript code is interpreted
  • What is Hoisting?
  • Examples
If you prefer watching the video instead of blog post, then below is the youtube video from "Technical Potpourri".




The way JavaScript code is interpreted

JavaScript engine always interprets the JavaScript code within the Global Execution context which comes with two phases - compilation and execution.

During the compilation phase, JavaScript will parse the written code to find out all functions and variable declarations. When found, it will allocate space in memory for each of the declared variables. This is what knows as "Hoisting". 

So "Hoisting" is a process of moving variable and function declarations to the top of the scope. This creates the illusion of "moving at the top of their scope", but in reality, the JavaScript engine will store the declared variables and functions in memory even before the rest of the code try to refer to them.

During the execution phase, the JavaScript engine will assign values to the variables and start processing functions.

What is Hoisting?

Based on the discussion above where I have explained how JavaScript codes are being interpreted, all variable and functions are lifted to the top of their functional/local or global scope regardless of there where they are declared. This is what known as "Hoisting".

With that, I think this is the time to jump into examples.

Example 1

In the below code, the variable "myName" is declared at line #1 and then referred at line #2, but the value to the variable is only given at line #3. That is why when JavaScript will execute line #2, it will find the variable, but there is no value and that is why it will print "undefined"

var myName;
console.log(myName);    //undefined
myName = "Sudipta Deb";

Example 2

In the below code, the variable "myName" is declared and initialized at line #2, but the variable is being referred at line #1. Now here comes the JavaScript "Hoisting" which will move the variable declaration at the top, but the value initialization will happen at line #2 only. 
Hoisting will only take care of variable declaration by moving that at the top of the scope but will keep the initialization untouched. 
That is why when JavaScript will execute line #1, it will find the variable, but there is no value and that is why it will print "undefined".

console.log(myName);    //undefined
var myName = "Sudipta Deb";

Example 3

In the below code, the variable "myName" is declared and initialized at line #2, but this time I have used let instead of var. JavaScript "Hoisting" will move the variable declaration at the top, but the value initialization will happen at line #2 only. Now since the variable declared with let will not get any default value initialized(which is the case when the variables are declared with var will get undefined as the default value), at line #1 I will get ReferenceError. 

console.log(myName); //ReferenceError: Cannot access 'myName' before initialization
let myName = "Sudipta Deb";

Note - Please refer to my other post about "Understand JavaScript Variable Declaration with Scope - Let vs. Var vs. Const".

Example 4

In the below code, within the function, first, the variable is declared, followed by using that in console statement and then finally initializing the variable. Now when we will call the function, like example #1, it will print undefined because the variable is there, but without any value (rather it is having the default value undefined).

function hello() {
var myName;
console.log(myName); //Undefined
myName = "Sudipta Deb";
}

hello();

Example 5

In the below code, the variable "nameWithVar" is declared with var, but due to hoisting, the declaration will move to the top with the default value as undefined. That is why at line #1 and line #3, it will print undefined.

console.log(nameWithVar); //Undefined
{
console.log(nameWithVar); //Undefined
var nameWithVar = "Sudipta Deb";
}


Example 6

In the below code, the variable "nameWithLet" is declared with let, but due to the nature of let, it will not make the variable accessible outside the block. So hoisting will not move that variable outside of the scope and that is the reason line #1 will print ReferenceError: Not defined.

console.log(nameWithLet); //ReferenceError: Not defined
{
let nameWithLet = "Sudipta Deb";
}


I hope this blog post will help you to understand how "hoisting" works in JavaScript. 

If you like this article, please check the video contents from my youtube channel - Technical Potpourri, and subscribe here.

Post a Comment

0 Comments