Hoisting in JavaScript

Let’s talk about hoisting in JavaScript, how it works and how we can benefit from it.

JavaScript’s another beautiful part that makes us love language.

So, let’s start with this :

What is Hoisting in JavaScript?

In simple and easy words hoisting in javascript means hosting is the action of moving all the variable and function declarations of the javascript interpreter to the top of the current scope before the code execution. It allows us to access the variables and functions anywhere in their scope, no matter where they are declared.

We will see various examples below that will help us better understand the Variable and function hoisting behavior of JavaScript.

In this article we will talk about:

• Hoisting Variable
• Hoisting Functions

Before moving on to hoisting, you must know undeclared variables do not exist until the code assigning them is executed.

All undeclared variables are global variables.

Hoisting Variable ?

The scope of a variable declared with the keyword var is its current execution context. This is either the enclosing function or for variables declared outside any function, global.

Consider the below piece of code and let’s see what the output would be.

Javascript hoists our variable language to the top of the file and declares is there but it does not set it equal to anything, then as the interpreter moves through the file to where the variable was initially declared and sets the variable equal to the correct value which is javascript.

Output:-

You can see our first console log was undefined and the second console log was the value javascript since it ran through the file and set the language variable equal to javascript.

Note? : Although it seems that the declaration has moved up in the program in hoisting, what happens here is that the function and variable declarations are added to memory during the compile phase.

When the variable is declared inside the function, it will be hoisted at the top of the function, see the below example.

Output:-

We get a reference error when we try to access a topic variable in the console statement outside the function because the variable topic is hoisted at the top of the greet function instead of the top of the program, and it becomes a local variable instead of the global variable.

Variables declared with let and const remain uninitialized at the beginning of execution while variables declared with var are initialized with a value of undefined.

Hoisting Function?

Same as variable declarations are hoisted and moved to the top, functions that are declared also get hoisted.

Output:-

We have called the helloHoisting() function before its declaration and get the desired output due to hoisting, the program is executed as follows:

function declaration is moved to the top due to hoisting!

However it we use functions as an expression then it’s not hoisted because be it variable or function hoisting it only works with var keyword, see below:

Output:- ReferenceError: Cannot access ‘sayHello’ before initialization

ES6: let Keyword

Output:-

As before, for the var keyword, we expect the output to be undefined. But this time we got a reference error. Does that mean let and const variables were not hoisted? The answer is that variables declared with let are still hoisted, but not initialized, inside their nearest enclosing block. If we try to access it before initialization, it will throw a Reference Error.

Conclusion?:

Hoisting is the default behavior of JavaScript that enables us to access variables and functions before their declaration. Hoisting works with var keyword and not let and const keywords, just the declarations are hoisted and not the initialization. If a variable is declared inside the function it will be hoisted at the top of the function and not at the global scope level. Functions are hoisted too, but functions as an expression are not.