Mastering Hoisting in JavaScript: The Differences Between let, const, and var

When it comes to understanding variable declaration in JavaScript, developers often get confused about the concept of hoisting. In JavaScript, hoisting is a mechanism that allows variables and functions to be used before they are declared. However, hoisting of variables defined with var, let, and const differs. In this article, we will discuss the concept of hoisting in JavaScript and how hoisting works with variables declared with var, let, and const.

Hoisting in Javascript

"Hoisting is a phenomena by which we can access variables and functions even before we have declared them without running into any error as the compiler moves the declaration of variables and functions to the top of their respective scopes before the code is executed"

Hoisting with var

Let's see the above statement in practice with the below example where we are trying to console var "a" before it is declared.

We can see that the debugger is on the very first line of the code and none of the code has been executed yet but in the Global scope at the bottom we can see variable "a" is initialised to undefined and function "addNumbers" has the entire function definition assigned to it.

Output after running the code without any errors

hoisting in javascript | Rupali yadav | webexpe.com

So why didn't we run into any errors here?

During the compilation phase, A execution context was created for this code before the execution starts.
The first step in an execution context is to allocate memory to each and every variable and function.
During this assignment of memory it assigns each variable with a special keyword i.e. "undefined" and the functions declared using "Function Declaration" fashion with the entire function copy.
So when we access a var before it has been declared, it returns undefined as seen in the above example.

Will a function work the same way as above if we declare the function using "function expression"?

No, it won't work as the function will be treated as a variable hence it will be assigned "undefined" during memeory allocation step.

Hoisting with let and const

Variables declared with let and const are also hoisted to the top of their respective scopes but with a slight difference They are also hoisted but are never hoisted with a default value like it happens in case of var. Hence, accessing a let or const before its declaration will result in ReferenceError.

Hoisting with let


    console.log(a);

    let a = 10;

Hoisting with const


    addNumbers(2, 4);

    const addNumbers = function (a, b) {
        console.log(a + b);
    }

Conclusion

In conclusion, hoisting is a powerful mechanism in JavaScript that allows developers to declare variables and functions anywhere in the program and use them anywhere within their respective scopes. However, it is important to understand the differences between hoisting with var, let, and const to write efficient and bug-free code.

Thanks for reading with us till here 🙂
Hope you enjoyed this article! 🙂. If this article helped you please follow me on github and linkedIn for more such articles and other updates.
Please feel free to write any questions or further thoughts on this topic below.