Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is Variable Shadowing in JavaScript?
In programming, shadowing occurs when a variable declared in a certain scope (e.g. a local variable) has the same name as a variable in an outer scope (e.g. a global variable). When this happens, the outer variable is said to be shadowed by the inner variable.
In JavaScript, variables can be shadowed in both the global and function scope. Global variables can be shadowed by function-scoped variables, and function-scoped variables can be shadowed by block-scoped variables declared with the let or const keyword.
Variable Shadowing in the Global Scope
In the global scope, shadowing occurs when a variable declared with the var keyword has the same name as a variable declared with the let or const keyword. When this happens, the global variable is said to be shadowed by the function-scoped variable.
Example
For example, consider the following code ?
<!doctype html>
<html>
<body>
<div id="result1"></div>
<div id="result2"></div>
<script>
var x = "global";
function foo() {
let x = "function";
document.getElementById("result1").innerHTML = x
}
foo();
document.getElementById("result2").innerHTML = x
</script>
</body>
</html>
function global
In this code, the global variable x is shadowed by the function-scoped variable x declared inside the foo() function. As a result, the value of x is different inside and outside the foo() function.
Variable Shadowing in the Function Scope
In the function scope, shadowing occurs when a variable declared with the let or const keyword has the same name as a variable declared with the var keyword. When this happens, the function-scoped variable is said to be shadowed by the block-scoped variable.
Example
For example, consider the following code ?
<html>
<body>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<script>
function foo() {
var x = "function";
document.getElementById("result1").innerHTML = x
{
let x = "block";
document.getElementById("result2").innerHTML = x
}
document.getElementById("result3").innerHTML = x
}
foo();
</script>
</body>
</html>
function block function
In this code, the function-scoped variable x is shadowed by the block-scoped variable x declared inside the block. As a result, the value of x is different inside and outside the block.
Advantages of Variable Shadowing
Example 1: Block Scoping
Variable shadowing can be used to improve code readability and clarity. For example, consider the following code ?
<html>
<body>
<div id="result1"></div>
<div id="result2"></div>
<script>
function foo(x) {
if (x > 10) {
let y = "big";
} else {
let y = "small";
}
try {
document.getElementById("result1").innerHTML = y
} catch(err) {
document.getElementById("result1").innerHTML = "y is not defined"
}
}
foo(20);
</script>
</body>
</html>
y is not defined
In this code, the variable y is declared inside both the if and else blocks. However, since the two variables are in different blocks, they are not the same variable. As a result, trying to access the y variable outside of its block will result in a ReferenceError.
Example 2: Preventing Accidental Variable Modification
Shadowing can also be used to reduce the likelihood of errors. For example, consider the following code ?
<html>
<body>
<div id="result"></div>
<script>
function foo(x) {
let y = x;
y = 101; // reassign y, does not reassign x
document.getElementById("result").innerHTML = x
}
foo(10)
</script>
</body>
</html>
10
In this code, creating a local variable y prevents accidental modification of the parameter x. As a result, reassigning the y variable does not affect the x variable. This can help to prevent accidental errors where the value of a parameter is unintentionally reassigned.
Disadvantages of Variable Shadowing
Example 1: Confusing Variable Names
Sometimes shadowing can make code more difficult to understand. For example, consider the following code ?
<html>
<body>
<div id="result1"></div>
<div id="result2"></div>
<script>
function foo(x) {
let y = x;
{
let x = 10; // x is shadowed
y = 20;
document.getElementById("result1").innerHTML = x
}
document.getElementById("result2").innerHTML = x
}
foo(20);
</script>
</body>
</html>
10 20
In this code, the inner block declares a new variable x that shadows the parameter x. This can be confusing for someone reading the code, as it is not immediately clear which x variable is being referenced.
Example 2: Debugging Complexity
Shadowing can also make code more difficult to debug. For example, consider the following code ?
<html>
<body>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<script>
function foo(x) {
let y = x;
document.getElementById("result1").innerHTML = y
{
let x = 20;
let y = 30;
document.getElementById("result2").innerHTML = x
}
document.getElementById("result3").innerHTML = x
}
foo(10)
</script>
</body>
</html>
10 20 10
In this code, it is not immediately clear that both x and y variables have been shadowed inside the block. This can make it difficult to debug errors that may occur as a result of unexpected variable values.
Conclusion
Variable shadowing can be a useful tool for improving code readability and reducing the likelihood of errors. However, it can also make code more difficult to understand and debug, so it should be used judiciously with clear variable naming conventions.
5K+ Views
