Variable Shadowing in JavaScript
Last Updated :
01 Feb, 2025
Variable Shadowing in JavaScript occurs when the inner variable hides or overrides the outer variable within the local scope. In this situation, the outer variable cannot be accessed within the inner scope, only the inner variable is used in that scope.
- Variable Shadowing occurs when we declare the same name for the variable in the inner and outer scope.
- The inner variable will hide or override the outer variable.
- The outer variable will become inaccessible until the code exists in the inner scope.
JavaScript
let n = 5; // Outer variable
function a() {
let n = 10; // Inner variable that shadows the outer one
console.log(n); // 10 (inner n is used here)
}
a();
console.log(n); // 5 (outer n is still used here)
In this example
- Inside the function, the inner value of the x shadows the outer value of the x.
- Outside the function, the value of the x remains unaffected.
How Variable Shadowing Works in JavaScript?
1. Shadowing with var
When we declare the variable with var, it only exists within the function in which it is declared even if it is inside an if or for loop. If we have a variable with the same name outside the function, the variable inside the function will hide the outer one.
JavaScript
var n = 10; // Outside the function
function t() {
var n = 20; // Inside the function, 'n' is different
console.log(n); // Prints 20
}
t();
console.log(n); // Prints 10 (the one outside the function)
2. Shadowing with let and const
When we declare the variable with the let or const, the variable only exists inside the block (like an if statement or a loop). If we use the same name for a variable inside the block, it will hide the one outside the block. This is different from var, which is only limited to the function.
JavaScript
let n = 10;
if (true) {
let n = 20; // Shadows the outer 'a'
console.log(n); // 20
}
console.log(n); // 10
Due to the block scoping let the a inside the if block is different from the a in the outer scope.
Why Does Variable Shadowing Happen?
Variable Shadowing in JavaScript mainly happens when we declare the variable inside the local scope with the same name in the outer scope. Below are the mentioned reasons why variable shadowing happens
- Reusing Variable Names: Sometimes when we accidentally declare the same variable name in a different part of the code, especially in large functions which can cause variable shadowing.
- Unintended Overwrites: When we work with the block or the function scope we might accidentally change the value of the variable in the outer part of the code.
- Control Flow: Developers can intentionally use shadowing inside the conditions or loops to limit the use of the variable in certain parts of the code.
How to Avoid Issues with Variable Shadowing?
- Use Descriptive Variable Names: Choose meaningful names to reduce the chances of accidental shadowing.
- Minimize Variable Scope: Declare variables in the smallest scope possible to limit their visibility.
- Enable Strict Mode: Use 'use strict'; to catch common mistakes, including some shadowing issues.
- Use Linters: Tools like ESLint can warn you about potential shadowing problems.
- Refactor Nested Code: If you find shadowing happening frequently, consider refactoring your code to reduce nesting.
Similar Reads
Understanding Variable Scopes in JavaScript In JavaScript, scope defines the accessibility of variables in different parts of your code. It determines where a variable can be accessed or modified.Before ES6 (Released in 2015), variables were declared only with var, which is function-scoped (accessible within the function) and global Scoped (A
5 min read
What is Variable Scope in JavaScript ? Variable scope is the context of the program in which it can be accessed. In programming, a variable is a named storage location that holds data or a value. Think of it as a container that you can use to store and manipulate information in your code. Variables allow you to work with data in a flexib
4 min read
JavaScript Variables Variables in JavaScript can be declared using var, let, or const. JavaScript is dynamically typed, so variable types are determined at runtime without explicit type definitions.JavaScript var keywordJavaScript let keywordJavaScript const keyword JavaScriptvar a = 10 // Old style let b = 20; // Prfer
5 min read
JavaScript Local Variables What are Local Variables in JavaScript?JavaScript local variables are declared inside a block ({} curly braces) or a function. Local variables are accessible inside the block or the function only where they are declared. Local variables with the same name can be used in different functions or blocks
2 min read
Shadowing Properties in JavaScript Shadowing properties in JavaScript refer to the scenario where a variable declared within a nested scope has the same name as a variable in its outer scope. This can lead to confusion and unexpected behaviour, as the inner variable may "shadow" the outer one, effectively hiding it from the outer sco
2 min read
JavaScript Course Variables in JavaScript Variables in JavaScript are containers that hold reusable data. It is the basic unit of storage in a program. The value stored in a variable can be changed during program execution. A variable is only a name given to a memory location, all the operations done on the variable effects that memory loca
4 min read