Well, you would have heard of this term(at least some of you), no worries if you haven't, we'll get it covered for everyone!

Are you excited? If not, get excited, you are going to learn something new and interesting! (or maybe revising).

First of all, let us go through the definition by MDN Web docs:

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, before the execution of the code.

Forget about what you read above 😂, but what term Hoisting is comprised of? Look carefully!

It's Hoist, and according to our dear friend google, it means: to lift or pull something up and that is what hoisting in javascript is(as per the definition), but how does javascript pulls the function, variables or classes declaration to the top? Let's understand that.

💡 Pro Tip: Remember everything in javascript boils down to the great, the one and only: The Execution Context!

Now if you know what is an execution context and figured out how it happens, you don't need to read further😂(I am just joking, do read it).

Consider the piece of code, by the way, I would request you to turn up your VSCode editor(or whatever you prefer) and follow along, I am damn sure you would love it when you would get to see the things happening.😵

console.log("Hoisting Busted!");

console.log(a);

helloWorld();

function helloWorld() {        
    console.log("Hello World");
}

var a = 10;

Save your code and open the index.html file in your favorite browser, make sure to include the script file in your index.html file. Follow the below steps:

1. Go to developer tools. If you are on chrome like me just hit Ctrl + Shift + I.

2. Now in this developer tools, you could see some tabs like Elements, Console etc. Try to look for Source and open it, if you are not able to find it just click >>, you would find the Source tab there, open it!

3. Place the debugger on the first line of the code: You would be able to see all the files in our project, just open the javascript file in which you have written this js code and now at the very first line (where console.log() statement is written), look at the channel, where the line numbers are marked and click on the first line(i.e. placing debugger on the first line).

4. Refresh the page now.

Your code is now executing in debug mode. See the below image for your reference:

Now can you see something just below the Scope on the right side, yes that Global!

This Global contains all the variables and functions that are accessible to you globally, i.e. you can access these from anywhere across the script file and yes this is our global object, the one and only window object, don't believe? in your console just type window and hit enter! 😄

Now if you expand this Global and closely see, you would be able to see something like a: undefined, is this the variable a which we declared and defined in our script file.

Yes, it's the same!

But why it's undefined? That's where the concept of execution context comes into the picture and because of it, all the javascript variables declared with var keywords are allocated the space in the global scope (even before the execution of code) and assigned a special value, a placeholder undefined, and that is the reason even before the declaration and initialization of the variable we can access the variable and hence it prints undefined.

And that's the hoisting of variables declared with the var keyword.

Now its functions turn.

Just scroll down and try to look for something like helloWorld, did you find that? you definitely would!

Just click on that and boom! the exact copy of our function which we wrote in our script file is present here and again that's also because of the execution context, and that's the ultimate reason why we can access the function even before it's being defined, and thus when we resume the execution of the code (click the blue button to resume code execution or we can remove the debugger the same way we added) we would see the Hello World message from the helloWord() function printed!

And that's the hoisting of functions.

Wait, it's not over yet!

What about variables declared using let, const or function expressions (functions assigned to variables), are they hoisted?

Yes, they are but in a scope different from Global!

Let's continue with our previous code with a little change:

console.log("Hoisting Busted!");

console.log(a);
// Change Below
console.log(b);

helloWorld();

function helloWorld() {        
    console.log("Hello World");
}

var a = 10;
//Change Below
let b = 20;

Again copy and paste this code into your editor and also put a debugger on the console.log(b) statement.

If you see on the Scope side, you would be able to that our newly declared variable 'b' resides in a different scope Script.

Now continue the code execution...What happened, an error occurred, a Reference Error? That's because:

💡 let and const declarations are in a temporal dead zone.

What is a Temporal Dead Zone(TDZ)?

Let's understand it with the help of an example.

Imagine you are planning to go from place A to B. So you book a ticket and you have that ticket with you. But until you board that flight or train, would you be able to reach the destination? No, right? (Unless you have some superpowers, you won't!😃).

Now let's map it to Temporal Dead Zone (TDZ).

Until you board your flight or train, you can't reach your destination, i.e. until the code execution reaches the let and const declarations, we won't be able to use them and this is what a temporal dead zone is, so let's define the temporal dead zone.

Temporal Dead Zone is an area where a variable is inaccessible.

Thus these variables would be usable once declared.

That's all for this article from my side. If you enjoyed reading this do let me know. Also, suggestions are welcomed, as they would help me grow, so until next time, keep learning, keep sharing and take care!