What is variable hoisting
In the 'var' world of JavaScript, the variable is not bound to the boundary of block level curly braces {}. Even if we declare the variable inside an if loop, it gets moved to the function where if belongs. This is not the case in other languages such as C,C++, Java, C# etc...There the variable is limited to the boundary of block level braces but never in the case of JavaScript. That seems a developer friendly feature in JavaScript at first. But it can cause issues, if we write code without knowing what is variable hoisting.
Below is a good example
foo(); function foo() { if (new Date().getMinutes() % 1 === 0) { var time = new Date(); } alert(time); }
If we just look at the code we may conclude that the alert will always shows undefined. But if we know hoisting, we can easily identify the difference here. If the condition is true, the time variable is going to have value.
Even if the statements inside the condition didn't execute, we don't get any runtime exception in strict mode. It just shows undefined. Lets see below code.foo(); function foo() { function innerFoo() { if (new Date().getMinutes() % 1 === 0) { var time = new Date(); } } innerFoo(); alert(time); }
Here always we get exception if the code is in strict mode. This is because the time variable never gets hoisted to the outer function.
Variable hoisting and global variables
Below is another interesting scenario if global variable or variable in parent scope has same name as inner variable
time = new Date(); alert(time); foo(); function foo() { alert(time); var time = new Date(); alert(time); }
When we run the above snippet. We could see that first alert shows the time. Second one shows undefined and third one shows time again. Why the second one shows undefined? Lets see how the variable hoisting worked here. Below code snippet shows the code after hoisting.
time = new Date(); alert(time); foo(); function foo() { var time; alert(time); time = new Date(); alert(time); }
Of course we cannot see the hoisted code since JavaScript don't compile to output file. But this is what happens.
Does this mean global variable is not safe
The above may cause confusion that global variable is altered by the variable inside function. But it is not. Lets see the below code snippet.
time = new Date(1947,7,15); alert(time); foo(); function foo() { alert(time); var time = new Date(); alert(time); } alert(time);
When we run we could see that the 4th alert is showing same date of first alert. That means the global variable is not altered by the function since it is different variable with same name. This is similar to the other languages. But this is true only to the variables out side of function. What if the outer variable is inside the function and inner is inside an if statement?
foo();function foo() {var time = new Date(1947, 7, 15);alert(time);if (time.getYear() < 2000) {var time = new Date();alert(time);}}alert(time);
We could see that the 3rd alert shows current date not the old one initialized at the beginning of the function. This shows the hoisting is to the immediate function level and it is same variable through out the function.
Hoisting functions
In the above code snippets we can see that the foo() is called before it is defined. JavaScript has no problem with that. But lets see the below scenario. Guess what will happen
foo();var foo =function () {var time = new Date();alert(time);}
It complain that foo is not a function. Many of us might have spent good amount of time troubleshooting why this is not a function at first. The reason is hosting. When it does, it moves the variable foo declaration to the top of the function ie above the foo(); statement and when we call foo(); it is not yet a function as the function definition is assigned to that variable later.
If we move the calling foo(); below the assignment it starts working.
Enter let for block level scoping
The keyword 'let' is introduced into JavaScript ES6 / ES2015 to have block scope. ie the variable can be scoped to an if block than to function level. Lets have a look at below snippet.
foo();function foo() {var time = new Date(1947, 7, 15);alert(time);if (time.getYear() < 2000) {let time = new Date();alert(time);}}alert(time);
We could see the above code shows old date. The only difference is the usage of let for declaring variable inside if block.
Does let hoist
If we use a variable before it is declared with let, it throws exception. But if we use a variable before it is declared using var it has undefined. Means hoisting is not happening as is in let.
foo();function foo() {try {alert(oldTime);var oldTime = new Date(1947, 7, 15);} catch (ex) { alert(ex) }try {alert(time);let time = new Date();} catch (ex) { alert(ex) }try {alert(noTime);} catch (ex) { alert(ex) }}
We could see in the above code, the oldTime gets hoisted with undefined value. The let throws exception similar to an real non declared variable noTime.
There are more in to 'let' such as temporal dead zone and restriction of redefinition etc... The new constructs such as class in JavaScript works the same way of let. Classes in JavaScript don't get hoisted.
If we think about different scenarios, things gets very much interesting. Eg: What if we declare same variable using var and let in same scope, different scopes, how they overlap etc...See the reference section for more such interesting scenarios.
No comments:
Post a Comment