Introduction
This article will be talking about one of the most fundamental topics of JavaScript, which is hosting. So as we all know, JavaScript is an interpreted language that goes through a compilation phase before the actual code execution. One of the phases that come in between the code execution phase is called hoisting.
What is Hoisting in JavaScript?
We can say hoisting is a process of moving variable and function declaration to the top of their respective scopes, and this behavior allows us to use variables and functions before they are declared in the code.
Now, let us discuss this all in detail.
Table of Contents
- Variable Hoisting
- Function Hoisting
- Hoisting and Scope
- Conclusion
Variable Hoisting in JavaScript
In JavaScript, as we know, there are a couple of ways to declare a variable, such as using “let” “const” and “var”. The key point to note here is the variables declared with the “var” keyword are hoisted, however it is important to understand that only the variable declaration is hoisted, not the initialization.
Let us understand this by an example.
console.log(name); // Output: undefined
var name = 'John';
In this example, we can see that we are trying to `console.log(name)` variable before its actual declaration, and even in that case it does not result in any error because during the hoisting process, the declaration of `name` is moved to the top, but the initialization remains in the same place as a result during the time of `console.log` statement the variable name exist because it is hoisted but the value remains `undefined`.
Function Hoisting in JavaScript
Similar to what we saw above about the variable hoisting, function declarations are also hoisted in JavaScript. This means we can call functions before they are declared in the code.
Let us understand this by an example.
sayHello(); // Output: "Hello!"
function sayHello() {
console.log('Hello!');
}
In this example, as we can see, `sayHello()` is invoked before it is declared, yet it will execute successfully, and it is because of hoisting. During hoisting, the function declaration is moved to the top of the scope, which allows it to be invoked from anywhere within that scope.
Hoisting and Scope in JavaScript
Let us now understand hoisting and its scope. As we all know, JavaScript has function-level scope, which affects how hoisting behaves. The variables declared with `var` are hoisted to the top of the current function scope rather than the block scope.
Let us understand this by an example.
function test() {
console.log(x); // Output: undefined
if (true) {
var x = 10;
}
console.log(x); // Output: 10
}
If we try to run this code, we will see that even though variable `x` is declared inside the if statement block, it is accessible throughout the `test()` function scope. During the process of hoisting, the variable `x` is moved to the top of the function scope, which makes it available in both `console.log()` statements. Still, the only difference is the output because the value of `x` is assigned inside the if statement block, and only after that will the value be readable, and that’s the reason we see two different outputs.
Things to consider while dealing with hoisting,
- Always remember to declare variables and functions before using them to enhance code readability.
- Avoid relying heavily on hoisting to prevent confusion and unexpected behaviors as much as possible.
- You can always use (`”use strict`”) at the top of the code to enforce strict rules and avoid any unintentional hoisting-related issues.
Conclusion
In this article, we came to know about hoisting in JavaScript. Understanding hoisting is very important in JavaScript as it helps to understand the behavior of variable and function declaration during the compilation phase. Hosting allows us to use variable and call functions before they are declared in the code; it is also important to note that only declarations are hoisted, not initialization.
If you have any questions, please drop comments, and I’ll be happy to explain it to you