Demystifying Hoisting in JavaScript

Introduction

Hoisting in Javascript is a very interesting yet confusing Concept. Many developers (including me) face problems understanding this concept in the beginning!

If you are facing problems to understand Hoisting, you are in the right place!

In this blog, we'll learn what hoisting is and how it works.

What is Hoisting?

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

Let me explain this in a simple way!

In Javascript, Wherever you have declared the variable,it will move to the Top of the scope irrespective of their Global/local scopes.

💡
Note: Hoisting only moves the Declarations to the Top, not the assigned values.

Javascript code execution context:

Basically, the Javascript execution context is divided into two parts:

1. Creation Phase

2. Execution phase

In the Creation Phase, Variables are allotted their memory space and initialized with the value `undefined`.

In the Execution Phase, Previously declared variables are assigned some values and they are used to do further operations.

Variable Hoisting:

Before jumping on Variable hosting, Try to predict the output of the following code:

console.log(Arindam);

var Arindam = 'Welcome to my blog';

So What will be the output?

Will it throw an error?

No, It won't do that. I have previously mentioned that hoisting moves the declaration to the top scope. So it will move the declaration of the variable Arindam to the Top and assign 'undefined' to it.

So the output is :

undefined

Now, Let's take another example:

console.log(Hello);

What will be the output of this?

Undefined?

No! Unlike the first example Hello is not defined here, So it will throw an error!

Temporary Dead Zone(TDZ):

Variables declared with let and const are hoisted but not initialized with a default value. So, If you try to access the value of the variables it will throw ReferenceError.

it happens because of the temporal dead zone (TDZ).

The TDZ starts at the beginning of the variable's enclosing scope and ends when it is declared. Accessing the variable in this TDZ throws a ReferenceError.

Let's see an example to understand this :

{
    // Start of Arindam's TDZ
    let Twitter = 'Elon';
    console.log(Twitter); // "Elon"

    console.log(Arindam); // ReferenceError because we're in the TDZ

    let foo = 'Arindam';  // End of Arindam's TDZ
}

For more information about TDZ, Check this Blog

Function Hoisting:

Just like Variables, Javascript functions are also hoisted. With this, we can call a function before it is defined.

Let us understand it with this example:

greet(); // output: "Hello there!"

function greet() {
  console.log("Hello there!");
}

Here, We are calling the function before its declaration and the output is "Hello there!" . It's because the function is hoisted to the top scope.

💡
Note that only function declarations are hoisted, not function expressions.

If we try to call the variable that the function expression was assigned to, we will get a TypeError or ReferenceError.

Here are some errors you may encounter.

Arindam(); // Uncaught TypeError: Arindam is not a function
var Arindam = function () { }

Red(); // Uncaught ReferenceError: Cannot access 'Red' before initialization
let Red = function () { }

baz(); // Uncaught ReferenceError: Cannot access 'baz' before initialization
const baz = function () { }

If you call a function that is never declared, it throws a different ReferenceError:

Goodbye(); // Uncaught ReferenceError: Goodbye is not defined

Conclusion:

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more content on Javascript and other web development topics.

To sponsor my work, please visit: Arindam's Sponsor Page and explore the various sponsorship options.

Connect with me on Twitter, LinkedIn, Youtube and GitHub.

Thank you for Reading :)

F