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.

Updated on: 03-Aug-2022

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements