It is widely acknowledged that declaring variables is a fundamental element in programming languages like C, C++, and others. Nevertheless, JavaScript introduces a unique concept called Hoisting, which can transform a seemingly perfect declaration into a hidden bug.
Hoisting
Within JavaScript, Hoisting represents a default behavior where all declarations, be it variable or function declarations, are hoisted to the top of the scope before the code is executed. Despite being perceived as an advantage, this feature ensures that all functions and variable declarations are positioned at the top of their scope, irrespective of their original placement within the program. This applies universally, regardless of whether they are defined globally or locally.
Thanks to the hoisting concept in JavaScript, we have the ability to invoke a function before declaring its definition in the code of our program.
Put plainly, it is possible to utilize variables and functions in JavaScript prior to formally declaring them due to the behavior where the JavaScript compiler shifts all variable and function declarations to the top of their scope. This approach, known as Hoisting, ensures that there are no errors during execution.
Note: The important thing to remember is that in JavaScript, function declaration and variable declaration are only hoisted, not initialization.
Let us understand what precisely this is:
The typical sequence in which variable declaration and initialization take place is as follows:
- Declaration
- Initialization/Assignment
- Usage
Example
<!DOCTYPE html>
<html>
<head><p>Life Cycle Of A Variable.</p>
</head>
<body>
<script>
let a; // Declaration
a = 199; // Assignment
document.write(a); // Usage
</script>
</body>
</html>
However, it is widely known that in JavaScript, it is possible to both declare and initialize variables at the same time. This pattern is frequently utilized:
Output
Note: Another essential thing to remember is that in the backend, JavaScript first declares the variables, functions, and after that initialize them. However, undeclared variables do not exist in the JavaScript until the code assigning them gets executed. So when assigning values to any of the undeclared variables, they are converted as global variables when the assigned code is executed. Therefore we can say that all undeclared variables are global variables.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
// hoisting
function codeHoist(){
a = 11;
let b = 50;
}
codeHoist();
function fun(){
document.write(a); // 11
document.write(b); // ReferenceError : b is not defined
}
fun();
</script>
</body>
</html>
Explanation of the program
Within the program provided, we have established a pair of functions named "codeHoist;" and "fun;" by utilizing the function keyword. Inside the "codeHoist" function definition, a variable "b" has been initialized using the let keyword with a value of 50. Additionally, another variable named "a" has been left undeclared and has been assigned a value of 11.
functioncodeHoist(){
a = 10;
let b = 50;
}
Within the implementation of the "fun" function, we merely output the values of both variables.
function fun(){
document.write(a);
document.write(b);
}
When the function "fun;" is invoked, it will display the value of an undeclared variable 'a' within the "codeHoist;" function. However, it will not display the value of a variable declared with the let keyword. This behavior arises from JavaScript automatically converting the variable 'a' to a global scope, allowing "fun;" to access its value. Conversely, the variable 'b' declared with the let keyword is confined to the function's scope, preventing "fun;" from accessing its value.
Output