Hoisting in JavaScript refers to the concept where declarations are given priority when code is executed. The declaration can be of a variable, class, or function. Yes, a variable declaration is hoisted, a function declaration is hoisted, and even a class declaration is hoisted in JavaScript.
Hoisting means that the compiler or interpreter or the parser, will process the declarations first, and then the rest of the code. Your code can have variables declared (and initialized), function declaration, and classes, all the declarations are parsed first and then the rest of the code.
Now this doesn't mean that the parser rearranges the lines of code, no! It will simply execute the declarations first and then the rest of the code line by line.
In declarations too, there is an order that is followed, for giving priority:
-
Function declarations are hoisted first. So the complete function declaration, including its name and body, is moved to the top of its containing scope or the block scope in which it is defined.
-
Variable declarations are hoisted second. The variables that are created using var keyword are hoisted. Also, one important thing to remember is that only the declaration part of the variable is hoisted, not the initialization. Don't worry about it, we will talk about this in detail below.
-
Class declaration is hoisted last. The entire class declaration is hoisted to the top of its containing scope.
So function declaration gets the top priority in hoisting, then variable declaration, and at last class declaration.
Now let's see all these different forms of hoisting with code examples to understand the concept of hoisting in JavaScript.
Variable Hoisting in JavaScript
When you create a variable with var keyword in JavaScript, then the variable name is hoisted, but its value is not hoisted.
So if you create a variable,
var someVar = 10;
The name of the variable is someVar, and the value assigned to this variable is 10 (initialization part).
Let's try to access the variable and its value before it is even created.
console.log(someVar);
var someVar = 10;
What do you think the output of the above code will be? In JavaScript, because of hoisting, the above code will not give any error, even though you are trying to access a variable even before it is created.
As per hoisting in JavaScript, the variable declaration (done on line number 3), is hoisted to the top of the containing scope, so the above code will be seen by the parser as if it were like this,
var someVar;
console.log(someVar);
someVar = 10;
So the output of the above code will be undefined. Because the variable creation part is hoisted to the top (before the console.log statement), but its initialization or assignment part is not hoisted, hence the value of the variable will be undefined, until the code where the variable declaration and initialization is actually done.
Once again, please do not think that the parser re-writes the code, hoisting the variable declaration. No, it is not like that. Your code is not re-written, it is executed like this by the parser, where each line of code is given a different priority.
Are let and const Variables also Hoisted?
The variables created using the let and const keywords are hoisted but not like the variables created using var keyword. The variable declaration hoisted is not available until the actual code where the variable is created. So in a way, you can say the variables created using let or const keyword are not hoisted.
console.log(someVar);
let someVar = 10;
The output of the code will be ReferenceError, because the variable is created on line number 3, and even though the variable is hoisted, it is in the temporal dead zone, which means it is like a dead variable.
So even if it is hoisted, it is not available.
Function Hoisting in JavaScript
When you create a function in JavaScript, the complete function declaration is hoisted.
function myFunc()
{
console.log("This is my function");
}
In the code above, you see a function declaration. If you try to call the function before it is declared, ideally it should not work, right?
For example,
myFunc();
function myFunc()
{
console.log("This is my function");
}
This code should give some sort of error because we have called the function myFunc() on line number 1, whereas we are declaring it on line number 3. But it will not give any error in JavaScript. Instead, it will work just fine, as if the function declaration was done at the top before the function is called, and that is exactly what hoisting is.
Class Hoisting in JavaScript
The class hoisting works just like let and const variable hoisting. The class hoisting goes into the Temporal dead zone until the code where the class is actually declared. So you cannot use it before its declaration.
console.log(SomeClass);
class SomeClass { }
ReferenceError: Cannot access 'SomeClass' before initialization
You will get an error. Before line number 3, where the class is declared, the class is hoisted but in the temporal dead zone, hence you cannot access it.
Order of Hoisting in JS
As we discussed at the beginning of this article, function hoisting is done first, then variable hoisting, and at last class hoisting. So if you have a code snippet in which you have some variables, functions, and a class, then function declaration is hoisted to the top, then variable declaration, and then class declaration.
