Variable Shadowing in JavaScript: How Global and Local Variables Interact

When a global and a local variable share the same name in JavaScript, the local variable takes precedence within its scope. This concept is known as variable shadowing. The local variable "shadows" the global variable within the scope where it is defined. Outside of that scope, the global variable remains unaffected.

How Variable Shadowing Works?

1.   Global Scope: A variable declared outside of any function or block has a global scope and can be accessed from anywhere in the code.

2.   Local Scope: A variable declared inside a function or block has a local scope and can only be accessed within that function or block.

 

When both a global and a local variable share the same name:

 

1.   Inside the local scope (e.g., within a function or block), the local variable is used, and the global variable is "hidden."

2.   Outside the local scope, the global variable is accessible as usual.

 

Example 1: Variable Shadowing in a Function.

 

variableShadowingInFunction.js

var name = "Global Name";

function displayName() {
    var name = "Local Name";
    console.log(`Inside of displayName function : ${name}`);
}

displayName();

console.log(`Outside of displayName function : ${name}`);

Output

Inside of displayName function : Local Name
Outside of displayName function : Global Name

·      In this example, the global variable name is defined with the value "Global Name".

·      Inside the displayName function, a local variable name is declared with the value "Local Name".

·      When ‘console.log(`Inside of displayName function : ${name}`);’ is called inside the function, the variable ‘name’ refers "Local Name" because the local variable shadows the global one.

Outside the function, when ‘console.log(`Outside of displayName function : ${name}`)’ is called, the variable name "Global Name" because the global variable is no longer shadowed.

 

Example 2: Variable Shadowing in a Block

variableShadowingInBlock.js

var counter = 10;

if (true) {
    let counter = 5;
    console.log(`Inside block ${counter}`);
}

console.log(`Outside block ${counter}`);

 

Output

Inside block 5
Outside block 10

 

·      Here, the global variable counter is set to 10.

·      Inside the if block, a new variable counter is declared using let and is set to 5.

·      Inside the block, ‘console.log(`Inside block ${counter}`);’ the variable ‘counter’ refers to the value 5 because the local counter shadows the global one.

·      Outside the block, ‘console.log(`Outside block ${counter}`)’ the variable ‘counter’ refers to 10 because the global counter is not affected by the block scope.

 

Note

1.   Local variables take precedence: When a local variable shares the same name as a global variable, the local variable is used within its scope.

2.   Global variables remain accessible outside: The global variable is not affected by the local variable and can be accessed normally outside the local scope.

3.   Avoid confusion: While JavaScript allows variable shadowing, it can sometimes lead to confusion or bugs. It's a good practice to use distinct names for global and local variables to avoid unintended consequences

Variable shadowing is a powerful feature that allows developers to reuse variable names in different scopes. However, it requires careful management to avoid accidentally overriding global variables. Understanding how scope works in JavaScript helps in writing clear and maintainable code.

 

 

Previous                                                    Next                                                    Home