Hoisting in JS, How it works Behind The Scene?

Everyone of us who are all learning JavaScript and working with JavaScript heard about the technical term “Hoisting”. It is one of the basic and important concept to know for better understanding .

“Hoisting is a default behaviour in JavaScript of moving all variable declaration at the top of scope before execution. It allows us to access variables and functions even before initialisation.”

The above sentences can be a good definition for Hoisting. But Have you ever imagined , how hoisting works behind the scenes ? and what is the reason for this hoisting behaviour in JS ?
That would be so cool🆒… Once you look at how it works BTS. It makes your understanding on “Hoisting” much better.Here the BTS doesn’t mean anything complex . It just “Debugger in Devolper Console” or someother Debugger in your own IDE.

So Without any further delay, let us dive deep into “Hoisting” and how it works BTS😶‍🌫️.

How Hoisting works for “var” declared variable?

We know before introduction of “ES6” standard, Everyone used to declare variables with “var”. but after introduction of “let/const”, it is preferred commonly to avoid unexpected error. So let us begin with how hoisting work in “var”.

// Logging a variable even before initialisation
console.log(x);
console.log(add);

var x=24;
function add(){
    console.log( 5+5 );
}

In the above code snippet, “x” has been logged even before intialisation.It throws an error in most programming languages. But JS is always weird😅….But we can’t say it as “weird” because it undergone a process of “HOISTING”.

Hoisting of Variable(var)

Here you can see, I put a debugger at the very first line of code, even before executing a single line of code , x is assigned as “undefined”.

This is because of “HOISTING + EXECUTION CONTEXT”.

Yes , “Hoisting” is a process takes places during the “Memory Allocation Phase” of Execution Context.If you want to know more detail of Execution context check out my previous blog

How JavaScript works?

“So let me give how it works, In Js , even before executing a single line of code , Memory is allocated for each and every variable and a copy of function is allocated during the Memory allocation phase”

For variable it is allocated as default value of “undefined”.So, It doesn’t throw an Error , That’s why we are able to access variable even before initialisation.

Many learners have a misunderstanding of hoisting doesn’t work on let/const, but the answer is “NO”.There is concept of temporal dead zone for let/const , we’ll see more about in another blog.

//Accessing function before initialisation
add();

function add(){
    console.log( "Add", 5+5 );
}

here I’m trying to access a function even before its intialisation. Stop Reading, take a guess what might be the output ?!

Someone new to JS might have guessed, for variable it is “undefined” ; So , for Function also it would be “undefined”. But, the output would be,

output

It is “Add 10” , there is no error or undefined in this context.

That is because, whenever there is a function , memory allocated and copy of it exist in scope during the memory allocation when the Execution context is created.

Here you can see even before execution , the function exist on the scope.

How function’s execution context works practically?

In My previous blog , how a function is executed theoretically ,now let us see how it executes in the call stack and what happens when it finished the execution .

Let me give a short intro of how it works, Whenever a function is created a “NEW EXECUTION CONTEXT” created withing existing one; When you invoke the function , it is pushed into call stack for execution , once iot completes execution , it is removed from call stack.

here you can see , before invocation of function , call stack doesn’t have execution context of function . Let us see how it look when it invoked,

Now see, when the function is invoked , the execution context is pushed into the call stack. This is how a function execution works.
Now let us make more interesting 🪄, What happens when function execution completed,

Now the add() execution context is removed from call stack , In console , it is logged as “Add 10”.

NOTE : Hoisting works differently in functions , var, let/scont, arrow function.we’ll discuss about that in upcoming blogs.

Let us wind up this blog with a short summary of this blog

1) Hoisting is a default behavior in JavaScript where variable declarations are moved to the top of their scope before execution, allowing access to variables and functions even before formal initialization.

2) During the memory allocation phase of the execution context, variables declared with “var” are assigned a default value of “undefined.” This enables them to be accessed before actual initialization without throwing an error.

3)Functions are also hoisted in JavaScript, meaning that a copy of the entire function is allocated during the memory allocation phase of the execution context.

4)Hoisting is closely tied to the concept of execution context. When a function is invoked, a new execution context is created and pushed onto the call stack. Once the function completes its execution, its context is removed from the stack.

Here I explained about “hoisting” with small code snippets .In upcoming blogs , we dive into more practical example, because hoisting is tied each code of JS. Do more crazy stuffs in code, practise it

Play with your code🛝

So If you liked this blog , give a applaud ,follow; Stay tuned for upcoming blogs for JS✌️ .

Cheers, Anthony Irudhaya Aakash😀