DEV Community

Cover image for Hoisting in Java Script
Ankit Kumar Sharma
Ankit Kumar Sharma

Posted on

Hoisting in Java Script

Nowadays, Java script is the most popular language in the world. If you are a fresher or experienced, then you should know, what is Java Script Hoisting?

In mostly technical interviews, that question frequently asked by interviewer but lack of knowledge, mostly guys don’t explain correctly. So, today I am explaining in very sufficient way.

Image description

Before hoisting, I am talking about, what is Global Execution Context?

Global Execution Context —

It is a process that run and contain the whole code and create a global scope for variables and functions in two phase

  1. Memory Creation — This is a part of hoisting behaviour in java script, where global execution allocate memory to each variable and function

  2. Code Execution — This is the part of execute that code will execute and allocate provided value to variables & functions if required, also this part can have inner sub execution context part for functions.

What is Hoisting ?

Hoisting is a process that access variables and functions before you have initialized or declared. It is a java script’s default behaviour of moving all declaration to the of the global execution scope.

Java Script create a global execution space for declare variable and function to allocate memory.

Variable hoisting

we can use a variable in code before it is declared or initialized. if we have not declared any value before use of that variable, it allocates undefined to that particular variable.

If we talking about variables and constants, keyword var is hoisted and let and const does not allow hoisting.

console.log(x) // undefined
console.log(y) // undefined
var x = 7;
var y;
Enter fullscreen mode Exit fullscreen mode

Function hoisting

It lets you use a function before you declare it in your code, it works as function will defined as you have initialized it or whatever code will execute in that inner function.

xyz();  // output - xyz is calling...
console.log(xyz)  // output - function xyz(){...} 
function xyz(){
console.log("xyz is calling...");
}
console.log(xyz); // output - function xyz(){...}
Enter fullscreen mode Exit fullscreen mode

What we learned above, about hoisting that works in global execution scope in two way that is variable and function. We know that each program has two parts variable & functions, that hoisting also work for both as same we explained above.

Let’s take one example for both part

Image description

Image description

We can see, hoisting works for both part in above example,

GitHub Source Code

Finally, today we learn about Java Script Hoisting, if you have any query for hoisting part, please comment on below section and I’ll try to resolve your query.

If you want to learn with me, please follow me on social accounts and also go through my website

https://www.ankitkumarsharma.com/

Also please follow me on GitHub , Twitter , Medium, and Dev for more updates on articles with hands on code queries.

Thanks, Happy coding life !

Top comments (0)