Hoisting in javascript refers to the process whereby the interpreter appears to move the declaration of functions, variables(var, let, const), or classes to the top of their scope, prior to execution of the code or we can say that while compiling the code.
Also, Hoisting is a concept in JavaScript, not a feature. So let’s take a look into this concept.
Introduction to the JavaScript Hoisting
In this blog, we’ll investigate how the hoisting mechanism occurs in JavaScript. But before we dive in, let’s get to grips with what hoisting is.
Hoisting comes under work when the js compiler compiles the code and checks for the declarations.
The js compiler moves all the declarations to the top of the scope [declarations of variable as well as the declaration of functions.
When the compiler moves all the declarations to the top of the scope there will be no error. however, it is a fact that the hoisting mechanism only moves the declaration, not the assignments.
While working with javascript you also found out that the hoisting is not possible when the declaration and the initialization occur in the same line of code.
So, we can say hoisting is only possible with the declaration but not the initialization.
Hoisting also allows the developer to use the function before they declared in the code.
Hoisting variables
The following refers to the JavaScript lifecycle and is indicative of the sequence in which the declaration of variable and initialization occurs.
All the declarations for variables and functions are at the top of the scope when the js compiler compiles the code.
It is however important to remember that in the background, JavaScript is religiously declaring then initializing our variables.
Variable hosting
JavaScript hoisting is available to work with variable (var). You can easily use a variable in the code before its declaration and initialization.
We already define that the javascript hoists the declarations only not the initialization.
var hoisting
Here we declare and then initialize the value of a var after using it. The default initialization of the var is undefined.
When the interpreter hoists a variable declared with (var), it initializes its value to undefined. The first line of code below will output undefined:
We can achieve this same behavior manually by splitting the declaration and assignment into two steps:
The same thing happens if we declare and initialize the variable in the same line.
As we already mentioned that the hoisting works for declaration. If we only initialize the value it will not work.
So, trying to read the variable before it is initialized results in ReferenceError an exception.
Using an undeclared variable before its assignment will also throw a ReferenceError because no declaration was hoisted:
Note however that initialization also causes declaration (if not already declared).
The below code snippet shows the example for the above statement.
Thankfully the let and const variables, introduced in ECMAScript 2015, behave differently.
let and const hoisting
Variables declared with let and const are hoisted but not initialized with a default value. Accessing a let or const variable, before it’s declared, will result in a ReferenceError:
class hoisting
Here we declare and then initialize the classes using the class declaration. The default behavior is that the javascript has a reference to the class.
However the class is not initialized by default, so any code that uses it before the line in which it is initialized is executed will throw a ReferenceError.
Function hosting
In functional hoisting the javascript allows us to call a function before its declaration or before defining the function.
JavaScript compiler moves the function definition at the top in the same way as variable declaration.
One of the advantages of hoisting is that it lets you use a function before you declare it in your code.
Without hoisting you would have to write the same code like this:
Function declarations are eligible for hoisting but the function expressions are not and this should make sense. Because we already learned that variable assignments are not hoisted.
If we try to call the variable that the function expression was assigned to, we will get a TypeError or ReferenceError, depending on the variable’s scope:
Summary
Variable hoisting
It is defining a variable with a let or a const keyword on the top of the block.
But if you are working in an older codebase or have to use var for another reason, all documents recommend that you write var declarations as close to the top of their scope as possible.
This will make the scope of your variables more clear. You can also use the ESLint rule which will ensure you don’t use a variable before its declaration.
Function hoisting
Function hoisting is useful because we can hide function implementation farther down in the file and let the reader focus on what the code is doing.
We can also define it as we can open the file directly and checking out what the code is doing without taking a look into the steps of implementation.
However, using functions before their declaration is a matter of the developer’s preference or the project scenario.
JavaScript hoisting occurs during the creation phase of the execution context that moves the variable and function declarations to the top of the script.
The JavaScript engine hoists the variables declared using the let keyword, but it doesn’t initialize them as the variables declared with the var keyword.
The JavaScript engine doesn’t hoist the function expressions and arrow functions.
Conclusion
It’s important to keep a few things in mind when declaring JavaScript functions and variables.
A variable assignment takes precedence over function declaration.
Function declarations take precedence over variable declarations.
Thanks for reading, and I hope this blog helped you learn about hoisting in JavaScript. Feel free to reach out to me at my Linkedln or Frontend Studio of Knoldus on LinkedIn if you want to connect or have any questions!
