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.
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.
All the declarations for variables and functions are at the top of the scope when the js compiler compiles the code.
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
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.
const variables, introduced in ECMAScript 2015, behave differently.
let and const hoisting
Variables declared with
const are hoisted but not initialized with a default value. Accessing a
const variable, before it’s declared, will result in a
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
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.
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 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.
A variable assignment takes precedence over function declaration.
Function declarations take precedence over variable declarations.