Hoisting is a unique feature of JavaScript, unique because no other interpreted programming language support hoisting. So what is Hoisting in JavaScript? If I informally defining Hoisting, it is a mechanism of JavaScript that puts all the variable and function declaration at the top of the script or code. Which allows us to access the variable or function before its initialization. I said informally because mostly all the developers define hoisting in this term. But what actually hoisting does is, it put all the functions and variable declaration at into the memory during the compilation time, and this is the technical working or definition of hoisting. The key point of hoisting is the declaration and in this tutorial, you will learn why so?
Variable hoisting in JavaScript
In other programming languages, we need to declare a variable before we access it. And the compilers and interpreters use the top-to-bottom approach to compile and execute the code, that's why we first declare a variable then access it. But the concept of hoisting in JavaScript allows us to write the code where we access the variable before its declaration. Because when we run the JavaScript code, first the browser compiles the complete code, and in that compilation phase the JavaScript put all the variable declarations at the top of the code. Now let's understand the concept of variable hoisting with example
<script >
document.write("Value of a is: " + a);
//variable declaration
var a = 20;
</script>
Output
Value of a is: undefined
The JavaScript engine will treat the above code as.
<script >
var a;
document.write("Value of a is: " + a);
a = 20;
</script>
When it comes to variables only the
var
declared variables are hoisted to the top of the script and their value is assigned to
undefined
, as you can see in the above example. If you use it for
const
and
let
variables the engine does not initialize a default value so they do not support hoisting. In the above example, you can see that the hoisting only put the
var a;
at the top of the script, not its initialization value
a=10;
Let's test the variable hoisting with another example where we only initialize a variable but do not declared it with the
var
keyword.
<script >
document.write("Value of a is: " + a); // error a is not defined
//variable initialization
a = 20;
</script>
If you run the above code it will throw an error "a is not defined" that you can check by inspecting the code. The above code will be throwing an error because hoisting only put the declaration not initialization.
Function hoisting in JavaScript
Similar to the variable hoisting, in function hoisting the function declaration put at the top of the script during the compilation phase or before the code execution. The function hoisting allows us to write the function call statement above the function declaration in the code. Example
<script >
func1(); // call function
//funciton declaration
function func1()
{
document.write("func1 is called");
}
</script>
Output
func1 is called
In the above code, you can see that we are calling the func1() before its declaration, this is because of hoisting. The function hoisting is only available for function declaration not with function expression. Because in a function expression we initialize the function to a variable, and according to the variable hoisting the initialization can not be hoisted to the top of the script. Example
<script >
func1(); //TypeError: func1 is not a function
//function expression
var func1 =function ()
{
document.write("func1 is called");
}
</script>
Summary
- Hoisting only put the variable and function declaration at the top of the script.
-
For variable declaration it only declares
vardeclared variables as undefined at the top. - Function expression and let & const keyword do not work with hoisting.
Note: Hoisting is a complicated feature of JavaScript so it's always suggested to follow the top to bottom approach for declaring and accessing variables and functions in JavaScript to avoid the hoisting bug.