Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
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>
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
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"; } document.getElementById("result1").innerHTML = y } try{ foo(20) } catch(err){ document.getElementById("result2").innerHTML = err } </script> </body> </html>
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
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 is shadowed by x y = 101; // reassign y, does not reassign x document.getElementById("result").innerHTML = x } foo(10) </script> </body> </html>
In this code, the variable y is shadowed by the variable x. As a result, reassigning the y variable does not reassign the x variable. This can help to prevent accidental errors where the value of a variable is unintentionally reassigned.
Disadvantages of Variable Shadowing
Example 1
Sometimes shadowing can make code more difficult to understand too. 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 by y y = 20; document.getElementById("result1").innerHTML = x } document.getElementById("result2").innerHTML = x } foo(20); </script> </body> </html>
In this code, the value of the x and y variables are swapped inside the block. This can be confusing for someone reading the code, as it is not immediately clear that the x and y variables have been swapped.
Example 2
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>
In this code, it is not immediately clear that the value of the y variable has been reassigned inside the block. This can make it difficult to debug errors that may occur as a result of the reassignment.
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. When using shadowing, it is important to consider whether the benefits outweigh the disadvantages.
4K+ Views
