
In this article, we will learn hoisting in JavaScript with the help of examples. We will look at both variable and function hoisting.
What is Hoisting?
Hoisting is the process of moving the variables and functions to the top of their scope before the code is executed. It allows us to access the variables and functions anywhere in their scope, no matter where they are declared.
We can hoist variables and functions. Let us understand them with examples.
Variable Hoisting:
Generally, we declare and initialize variables like this:
<script>
var num1; // declaration
num1 = 100; // initialization
console.log(num1); // prints 100
</script>
In JS, we can do the initialization before the declaration.
<script>
num1 = 100; // initialization
var num1; // declaration
console.log(num1); // prints 100
</script>
We can even move the declaration to the end.
<script>
num1 = 100; // initialization
console.log(num1); // prints 100
var num1; // declaration
</script>
This is called hoisting. We can access a variable before it has been declared.
In the case of var variables, you need to remember 3 things.
1. By default, the var variables are initialized with the undefined value.
<script>
console.log(num1); // prints undefined
num1 = 100; // initialization
var num1; // declaration
</script>
It prints undefined (initial value) because we are accessing the variable before initialization and declaration.
2. We can declare and initialize a var variable in a single statement. If we try to access it before the statement, it prints undefined.
<script>
console.log(num1); // undefined
var num1 = 100; // declaration and initialization
</script>
3. If we don’t declare a variable and initialize it with a value, it becomes a global variable. It is not hoisted. We get a ReferenceError.
<script>
console.log(num1);
num1 = 100; // initialization
</script>
Output:
Uncaught ReferenceError: num1 is not defined
Now, let us look at the let and const variables.
<script>
num1 = 100;
let num1;
console.log(num1);
</script>
Output:
Uncaught ReferenceError: Cannot access 'num1' before initialization
It throws ReferenceError. You will get the same output if you replace let with const. This is because, unlike var, they are not initialized with any default value.
Like I said before, the var variables are initialized with undefined. This is why hoisting worked without any errors. But, the let and const and are not initialized with any value. So, we got the error.
Function Hoisting:
Similar to variables, we can call a function before its declaration.
<script>
printMessage();
function printMessage() {
console.log("SemicolonSpace");
}
</script>
Output:
SemicolonSpace
If there is no hoisting, we have to write like this always:
<script>
function printMessage() {
console.log("SemicolonSpace");
}
printMessage();
</script>
Output:
SemicolonSpace
This is all about JavaScript Hoisting. I hope you got useful information. If you have any doubts, let me know in the comments below.
Related: