Part 3: Hoisting in javaScript

Hoisting is a phenomenon in javascript by which you can access variables and functions even before you have initialised those or you have put some value in it.

Example

var x = 8;

function getName() {
    console.log("Hi Hoisting")
}

getName();
console.log(x);

Output

Example 2: Try to access getName and x even before we are initialising it.

getName();
console.log(x);

var x = 8;

function getName() {
    console.log("Hi Hoisting")
}

Output

This means, getName() somehow access the function and invoke the function. But x is undefined 🤔.

Example 3: Remove var x = 8;

getName();
console.log(x);

//var x = 8; // remove or comment this line

function getName() {
    console.log("Hi Hoisting")
}

Output:

This says x is not defined . 🤔🤔

Is undefined and not defined are same thing? Nope 👎 🚫

Example 4:

function getName() {
    console.log("Hi Hoisting")
}
console.log(getName)

Output:

It just print the function.

Example 5: What if try to get function name before initialising it like did for x which gives undefined?

console.log(getName)
var x = 8;
function getName() {
    console.log("Hi Hoisting")
}

So

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

var x = 8;
function getName() {
    console.log("Hi Hoisting")
}

Output:

So, let’s dig down deep and see why it is behaving like this. Remember how Execution context works in previous part 1 and part 2.

So, even before this whole javascript code executes in javascript, memory gets allocated to each and every variable and function. Check below for reference. I put debugger here on first line of code, that means even first line of code is not executed yet and you can see variable and function already have memory allocated.

Even if you move console above and put debugger on first line then you can see memory is allocated .

getName();
console.log(x);

console.log(getName);

var x = 8;

function getName() {
    console.log("Hi Hoisting")
}

So, if you will move next line to line and check console then you ‘ll see output as :

Now, let’s come to undefined and not defined.

So, let’s remove var x = 8; then it means x is not in memory.

Memory is never allocated to x. As x is nowhere initialised in program.

When code executes and check console.log(x); then it will give ReferenceError: x is not defined

getName();
console.log(x);

console.log(getName);

function getName() {
    console.log("Hi Hoisting")
}

Now, let’s take an example of arrow function.

getName();
console.log(x);

console.log(getName);

var x = 8;

var getName = () => {
    console.log("Hi Hoisting")
}

Output:

What happened?

When you make getName an arrow function, it started behaving like any other variable not as a function. And In memory allocation phase, just like any other variable , it allocates undefined.

Even if you try below syntax:

getName();
console.log(x);

console.log(getName);

var x = 8;

var getName = () => {
    console.log("Hi Hoisting")
}

var getName2 = function() {
    console.log("Hi Hoisting")
}

function getName3() {
    console.log("Hi Hoisting")
}

you can see, only in case of proper function, it will copy the whole code and other two act as variables and have undefined value

Also, check this article for more details on hoisting.

I hope this article provides a clear understands of how Hoisting works in JavaScript. Hopefully, you learned something today. Happy Coding.

Read more about let, const and Temporal Dead Zone in JS

⭐️Happy Coding. ⭐️

Hopefully, you learned something today! Before you go:

• 👏 Clap for the story and follow Swati Redhu 👩🏻‍💻
• 📰 View more content in the JavaScript learning roadmap 2023 — The Ultimate Guide ❤️
• 🔔 Follow on : LinkedIn

🚀👉 Clear your JS basics and find an amazing job