Scope in JavaScript
One of the things I commonly see confuse C# developers when they start working with JavaScript is how different scoping is compared C#. The code below will alert “2” twice. The equivalent C# code would cause a compile time error because “num” already exists in the current scope.
var num = 1; if (num == 1) { var num = 2; alert(num); } alert(num);
Because JavaScript has function-level scope, blocks do not create a new scope. When we do require block-level scope, we may use an anonymous function to create a new scope.
var num = 1; if (true) { (function() { var num = 2; alert(num); })(); } alert(num);
The code below will alert “2” once. The reason is because the variable declaration for “num” is actually moved to the top of the function scope.
var num = 1; (function() { if (num) { alert(num); } var num = 2; alert(num); })();
This code is functionally equivalent to:
var num = 1; (function() { var num; // "num" is undefined at this point. if (num) { alert(num); } num = 2; alert(num); })();
Variable declarations are moved to the top, even if they are unreachable or dead code. This code will alert “2” then “1”:
var num = 1; (function() { if (!num) { num = 2; } alert(num); return; var num = 99; })(); alert(num);
If we removed the variable declaration in the inner scope, this code will alert “1” twice:
var num = 1; (function() { if (!num) { num = 2; } alert(num); return; //var num = 99; })(); alert(num);