Main Advantage Of Hoisting In JavaScript?
Before getting into the advantage of hoisting let's first understand what hoisting is So According to our favorite MDN Docs : JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code. In simpler words, the declaration of a variable, function or classes appears to be on top of the scope. (Note: Declarations are hoisted, Initializations are not!) Copy Copy //Example 1 console.log(a); // Will log undefined var a = 10; The interpreter reads the above code like this: Copy Copy var a; // Declaration hoisted to the top console.log(a); // log undefined because well a is undefined a=10 The same is also true for functions as well. Copy Copy //Example 2 console.log(sum(20,30)); // logs 50. function sum(numOne,numTwo){ return numOne+numTwo; } From the above three examples, the advantages and disadvantages of hoisting are somewhat visible. So Now let's directly talk about it. Explanation: In example 2, we saw how we could call a function (sum) before declaring it and still got the desired output. This can make writing code more convenient for the programmer. In real-life scenarios, it helps in writing helper functions without caring about the order we are declaring them in OR straight up putting them in a different file. In example 1, we saw how hoisting created somewhat a not-so-desirable output for us. Another major disadvantage of hoisting is that it allows you to declare a variable with the same name twice and the first variable will be overshadowed by the second variable. Copy Copy var a = 10; var a = 20; console.log(a); // logs 20 because of shadowing // INTERPRETATION var a; // Because variable even with a same name are declared only once. a=10; a=20; console.log(a); // 20 Hoisting is implemented by having the interpreter read the code twice. Once for extracting variable declarations, and for the second time for code execution. One such advantage of hoisting is mutual recursion. When there are two functions and the first function calls the second function and the second function calls the first, these two functions are said to be mutually recursion. (Disclaimer: Ignore if you don't understand this) Introduction Of ES6: With the introduction of ES6 (ECMAScript 6), things changed a little bit. ES6 came with a new way to declare variables using let and const keywords. A variable declared using these keywords is also hoisted but in a little different way. Until and unless the variable is not initialized it is in a temporal dead zone which means it cannot be accessed. Copy Copy console.log(a); // ReferenceError console.log(b); // ReferenceError let a = 20; const b = 30; (Note: const variables need to be declared and initialized in the same statement and the value cannot be reassigned again.) Developers coming from other programming languages did not like the concept of hoisted as it caused many bugs in the code. Let and const helped us to get away with the problems of var while maintaining the advantage of using functions. Conclusions: The main advantages of hoisting come with its convenience, code-readability, function hoisting and also mutual recursion. If you are still confused about the main advantage of hoisting maybe this answer from Stack Overflow might help Thanks For Reading :)
Before getting into the advantage of hoisting let's first understand what hoisting is
So According to our favorite MDN Docs :
JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.
In simpler words, the declaration of a variable, function or classes appears to be on top of the scope.
(Note: Declarations are hoisted, Initializations are not!)
Copy
Copy
//Example 1
console.log(a); // Will log undefined
var a = 10;
The interpreter reads the above code like this:
Copy
Copy
var a; // Declaration hoisted to the top
console.log(a); // log undefined because well a is undefined
a=10
The same is also true for functions as well.
Copy
Copy
//Example 2
console.log(sum(20,30)); // logs 50.
function sum(numOne,numTwo){
return numOne+numTwo;
}
From the above three examples, the advantages and disadvantages of hoisting are somewhat visible.
So Now let's directly talk about it.
Explanation:
In example 2, we saw how we could call a function (sum) before declaring it and still got the desired output. This can make writing code more convenient for the programmer.
In real-life scenarios, it helps in writing helper functions without caring about the order we are declaring them in OR straight up putting them in a different file.
In example 1, we saw how hoisting created somewhat a not-so-desirable output for us.
Another major disadvantage of hoisting is that it allows you to declare a variable with the same name twice and the first variable will be overshadowed by the second variable.
Copy
Copy
var a = 10;
var a = 20;
console.log(a); // logs 20 because of shadowing
// INTERPRETATION
var a; // Because variable even with a same name are declared only once.
a=10;
a=20;
console.log(a); // 20
Hoisting is implemented by having the interpreter read the code twice. Once for extracting variable declarations, and for the second time for code execution.
One such advantage of hoisting is mutual recursion.
When there are two functions and the first function calls the second function and the second function calls the first, these two functions are said to be mutually recursion.
(Disclaimer: Ignore if you don't understand this)
Introduction Of ES6:
With the introduction of ES6 (ECMAScript 6), things changed a little bit.
ES6 came with a new way to declare variables using let and const keywords. A variable declared using these keywords is also hoisted but in a little different way.
Until and unless the variable is not initialized it is in a temporal dead zone which means it cannot be accessed.
Copy
Copy
console.log(a); // ReferenceError
console.log(b); // ReferenceError
let a = 20;
const b = 30;
(Note: const variables need to be declared and initialized in the same statement and the value cannot be reassigned again.)
Developers coming from other programming languages did not like the concept of hoisted as it caused many bugs in the code.
Let and const helped us to get away with the problems of var while maintaining the advantage of using functions.
Conclusions:
The main advantages of hoisting come with its convenience, code-readability, function hoisting and also mutual recursion.
If you are still confused about the main advantage of hoisting maybe this answer from Stack Overflow might help
Thanks For Reading :)
