Hello everyone, I'm back with another interesting and very popular topic in the field of javascript. I'm talking about Hoisting which is one of the popular Interview question. I'm going to tell you what is Hoisting, How it works with functions and variables differently. So let's start.

What is Hoisting?

We know that in most programming languages we can't use variables and functions before the declaration or definition. But not in the case of JavaScript. JavaScript works a little bit differently with variables and functions compared to those programming languages

According to the most popular myth of Hoisting "Hoisting is the default behavior of moving all the declarations at the top of the scope before code execution. Hoisting allows you to use functions and variables before they're declared. "

The above definition tells the beginner-friendly definition. We can not say it is a proper explanation or definition why because it does not tell us how things are works. So for understanding the Hoisting we have to go into details that tell us how things are works.

Ok, first I'm telling you what is hoisting in short then I go in-depth. So Hoisting works according to the behavior of functions and variables. Hoisting works differently for the different types of declaration of the variable and different types of declaration of the function.

One thing I also mention here is If you know about Execution Context then you can easily understand Hoisting. If you don't know about Execution Context then let me tell you in short. Execution Context means how the JavaScript program runs.

Hoisting with Variables

As I told you Hoisting works differently for the different types of declaration of the variable. So we are going to know one by one how hoisting works with the different variable declarations.

Hoisting with var

For Understanding the Hoisting with var let's take a simple program that has two variables myName and myAge . Here I declare var type of variable declaration. But you must have noticed here that I am accessing myName and myAge variables here before declaring the variables. What do you think does it give any error or not? So what will happen? let's see process by process.

console.log(myName);
console.log(myAge);

var myName = "Jeetu";
var myAge = 25;

As you know Whenever you create variables and functions firstly javascript interpreter creates a memory space for those functions and variables before executing the program. In the case of variables if you declare some variables in your program then all the variables are first initialized with undefined before executing the program. You can see this theory below figure.

After the memory allocation of variables, the JavaScript interpreter executes the program statements line by line. As you see in the above program shown in the figure the first two statements are to print the myName and myAge into the console. So the javascript interpreter gives the value of myName and myAge which is undefined . Why undefined because till now values are not initialized with the variables. So the output will be undefined for both of the variables. I showed in the below figure

After the initialization of the variables, the interpreter assigns the given values to the respective variables and then you again print the value of the variables it works fine

console.log("Before initialization");
console.log(myName);
console.log(myAge);

var myName = 'Jeetu';
var myAge = 25;

console.log("Before initialization");
console.log(myName)
console.log(myAge)

Hoisting with let and const

After the release of the ES6 version of javascript, there are two new keywords is introduced let and const . These keywords are also used for the declaration of the variables. They work differently compared to the var . So let's see how hoisting works with let and const .

So we know that the variable which is declared with var interpreter first creates a memory for the variable and puts the value undefined after that when the interpreter executes the code then the value of the variable gets changed if the programmer initialized any value to that variable otherwise it will be undefined unless we do not assign any value to the variable.

When we talk about Hoisting with let and const It is not properly working. Because of the changes that were made to accessing variables after the release of ES6. The memory allocation part works as var works but it is not hoisted. When you use the const and let type of variable then you can't use it before the declaration of the variable. Why we can't use let and const because of let and const declarations can not be assessed before the execution of code. The declarations went into the Temporal Dead Zone. A temporal dead zone (TDZ) is the area of a block where a variable is inaccessible until the moment the computer completely initializes it with a value

So hoisting is not working with let and const. You can see the error occurs when we use the variable before initialization or declaration in the below image.

console.log(myName);

let myName = "jeetu";

Hoisting with functions

Hoisting also works with the function, but not for all types of functions. We know in most programming languages we can't access the function before the declaration or definition of the function. But in Javascript, we can use a function before declaration or definition so this is hoisting.

For understanding the hoisting with function let's take an example.

console.log(hello);
hello();

function hello() {
    console.log("hello guys");
}

It almost works as a variable but it is a little bit different in the memory allocation field. The interpreter allocates the memory to every variable and function when it finds any function call before the function definition or declaration then the interpreter attaches the function definition with the function call you can see in the below image.

So after memory allocation, the interpreter executes the code line by line so when a function call occurs the interpreter executes the function even before the function definition because of hoisting. You can see the Hoisting with the function below example.

console.log(hello);
hello();

function hello() {
    console.log("hello guys");
}

Hoisting always not works with all types of functions like the arrow function. Why let's see.

So let's write an arrow function and call it before it initializes or defines.

hello();
const hello = () => {
    console.log("hello guys");
}

We know that when we use the arrow function we put the arrow function into a variable. And you know how hoisting works with variables. So I think, I don't need to explain again in detail why hoisting does not work with the arrow function. But I explain in brief because whenever you call the arrow function before the function initialization or definition you find it undefined. That's why Hoisting doesn't work with the arrow function. You can see an example of this below figure.

Conclusion

So we see here what is the real meaning of hoisting in javascript. Hoisting is not just moving the declaration of variable and function at the top. We have learned what is going on behind the scene. Also, we learn here how hoisting works with variables and functions. I hope, you learn something from this article. If you find it informative then please tell me in the comment box and also like the article.

Thank you so much