Hoisting in JavaScript 🔥(variables & functions)

Hoisting in JavaScript is the most famous Interview Question. And it is also one of the most misunderstood concepts in JS.

Let's start with a very simple example.

var x= 7;
function getName(){
    console.log("Let's Understand Hoisting in JS")
    }

getname();
console.log(x);

As expected Output:

Now I will show something interesting and magical in Javascript.

Let's just move the function invocation to the top, before we declare the variables.

getName();
console.log(x);

var x= 7;
function getName(){
    console.log("Let's Understand Hoisting in JS")
    }

See what changes here, We are trying to access getName() even before we have initialized it. We are trying to access "x" even before we have initialized it.

Before I run this code, let me ask you. What will be the output here?

In most programming languages, this will result out to be an error. We can't access variables without initializing them. But Javascript is very different in this case and here I will show you the output.

Now you see some interesting output, isn't it? "Let's Understand Hoisting in JS" got printed means getName() is somehow able to access the function and invoke it. And in the case of "x," we got some special value undefined . What is this undefined? (Will discuss this in upcoming blogs)

Let's play more with this code and try to understand it. Let's remove this var x= 7; and run the code.

Now we see an error saying "x" is not defined. Before it was saying undefined . What heck is going on?

isn't undefined and not defined the same thing? - NO IT's NOT.

So, this magic and interesting thing are known as Hoisting in Javascript.

Hoisting is a behavior in JavaScript where variables and function declarations are moved to the top of their respective scopes (either global or functional) during the compile phase. This means that even though you may define a variable or function later in the code, it's considered to exist and accessible from the beginning of the scope, although its value will be undefined until the assignment is executed. In other words, hoisting makes it possible to use a variable or function before it is declared in the code.

Now let me show one more interesting thing.

//getName();
//console.log(x);

var x= 7;
function getName(){
    console.log("Let's Understand Hoisting in JS")
    }

console.log(getName);

see carefully, we are not invoking the function. we are just trying to log the getName value.

It prints the function itself. But what if we try to access it even before we initialize the function, just like we did for "x"?

//getName();
console.log(x);

console.log(getName);
var x= 7;
function getName(){
    console.log("Let's Understand Hoisting in JS")
    }

We got undefined for x. What should we get for getName? undefined? Let's run and see.

In the case of "x," it is printing undefined but for getName it is printing the whole function. This very weird thing in Javascript because we don't know things work behind the scene.

Let's go deep and see how everything happened and why the program is behaving the way it is behaving.

Remember in the last blog:(Must read) What happens when you run Javascript code?

I explained when we run Javascript code, an execution context is created and it is created in two phases. The first phase is Memory creation so yes answer lies there only, the whole concept is there only.

If you remember even before this code in Javascript start executing the memory was allocated to each variable and function.

Must watch this:

One last point I'd like to discuss here is Call Stack.

That's all about hoisting in Javascript and how the call stack works.