One of the javascript concepts which no one can understand in one go 🤔… and if you do then definitely hats of to you.😝

So coming to the topic and various related questions or doubts…what is Hoisting? Why do we need to do it? What happens when var is hoisted? What happens when let or const is hoisted? What happens when the function is hoisted? Let's begin to understand it.

What is Hoisting?

Definition wise Hoisting is a phenomenon in javascript where you can access variables and functions even before you have initialized them. Confused ???? 🥴🥴🥴

Let’s start with an example

The output will be undefined. Try to run it. But why undefined and why not 10, for that, we need to understand one most important fundamental of javascript that is “Everything in javascript happens inside an Execution Context. ” Thinking of what's execution context? Take for an example that execution context is a big box and it is separated into two parts. One is a memory component or variable environment where variables and functions are stored as a {key: value } pair. And the second part is Code Component or Thread of Execution. Now we know that javascript is a single-threaded language that is it can only execute one line or one thread at a time.

Now when you run the above code, it creates an execution phase with two parts. And even before this code starts executing a memory is allocated to all variables and functions. So for the variables, it stores a special keyword named undefined, and hence for x, memory has been allocated in key-value pair as { x: undefined }. How javascript compiler will output the code at runtime is as follows

And that is why console.log is able to output undefined because it recognizes that the variable x exists but x is not given any value.

Now let's see let and const hoisting

The output would be ReferenceError: Cannot access ‘x’ before initialization. Try it out. But why is this error coming? The answer would be when you declare variables with let or const, even they are allocated memory but they are stored in a different memory space than global scope and you can’t access this memory space or variables. It enters into the Temporal Dead zone(TZD). TZD is the time span between the period when the let or const variable was hoisted till it was initialized some value. So we can say that whenever we try to access the variables which are in the temporal dead zone it throws a Reference error.

Now let's take an example of a function

What do u think the output would be?? 🤔🤔

The output on the console would be “Hello world, My name is javascript” because when the code reads a function it allocates the memory for the function also but unlike variables, there is nothing like key-value pair for functions, rather it stores the entire function in the memory and hence when code reads it line by line we get the desired output.

Conclusion

Var, let, const, function & class declarations are hoisted what to remember is how are they being initialized. Therefore I can conclude two main points:-

Variable declarations are scanned and are made undefined.

Function declarations are scanned and are made available.

Thank You for reading it. Do 👍 or 👏 it if you could understand a bit also.😃