Hoisting in JavaScript

What is Hoisting ?

In Javascript programming language declarations are hoisted. Now what do I mean by hoisting ? Is it like hoisting a flag…Yes, definitely like hoisting a flag. Just as a flag when hoisted rises up the pole, declarations in Javascript rise up the top.

This means no matter where in the file the declaration was actually made, upon compiling it will be hoisted to the top. But hoisting is not carried out for every declaration, it is restricted to variables declared using keyword ‘var’ and functions declared using keyword ‘function’.

Variable Hoisting:

No matter where in the code a variable is declared, if it is declared using the keyword ‘var’ then post compilation it appears to the compiler as if that variable was declared at the top of its scope be it global or functional scope. But the same thing if tried with keywords ‘const’ and ‘let’ then the results will be different.

Example:

The above code snippet upon compiling will become below snippet:

Output:

Function Hoisting:

A similar phenomenon happens when we use the ‘function’ keyword to declare our functions. The function signature gets hoisted to the top of the scope and if that function was called in the scope before it was defined it works perfectly. But the same thing if tried with function expression i.e. defining anonymous functions and storing their references in a const or let variable, it will throw an error “Cannot find [function name]”.

Example:

The below code works fine because the function is declared using the ‘function’ keyword and therefore it gets hoisting to the top.

Output:

But the code below throws an error “Cannot find [function name]”, because it’s a function expression and function expressions don’t fall under the scope of hoisting.

Output:

Limitations :

Hoisting is actually limited to variables declared using the keyword ‘var’ and functions declared using the keyword ‘function’.

Advantages :

Hoisting is what let us declare variables and functions after they were actually called in our javascript code. But, if the value of those variables and functions were not defined before the code where they get called then we get ‘undefined’.

Let’s understand this with an example:

1. Defining > Calling > Declaring

The above code snippet will correctly log ‘Javascript’ in the console because the variable ‘name’ was actually defined before its value was called in the ‘console.log(name)‘.

Output:

2. Calling > Defining > Declaring

The above code snippet will log ‘undefined’ and then ‘Javascript’  in the console because the variable was defined after its value was called for logging.

Output:

Conclusions:

To avoid hoisting and to make your code predictable, as of ES6 or ES2015 we have new ways of declaring variables which include ‘const’ and ‘let’ and we also have the beautiful arrow functions ()=> as well. 

These new features are excluded from the scope of hoisting. So when you declare a variable using ‘const’ or ‘let’ or an arrow function do not expect it to be hoisted to the top, thus making your code more predictable and human readable.