How does Variable Shadowing work in JavaScript?

a yellow circle with JS black letters

Variable shadowing occurs when a variable declared within a specific scope has the same name as an outer-scope variable. As a result, you see unexpected behavior that makes the code harder to understand. This article explores the concept of variable shadowing in JavaScript and its implications.

What is Variable Shadowing?

Variable shadowing is when a variable with the same name is declared in an inner scope as a variable in an outer scope. In such cases, the variable in the inner scope hides the variable in the outer scope. Any references to the variable within the inner scope will refer to the inner variable, effectively "shadowing" the outer variable.

Scoping in JavaScript

Before we discuss variable shadowing, it's essential to understand the concept of scoping in JavaScript. JavaScript has function-level scoping, which means variables declared inside a function are only accessible within it and its nested functions.

In ES6 and later versions, JavaScript introduced block-level scoping with the let and const keywords. This allows variables (e.g., if statements or loops) to have a block-level scope.

Shadowing Variables in JavaScript

To better understand variable shadowing, let's consider an example:

Javascript code
let x = 10;

function foo() {
let x = 20;


In this example, we have two variables named x. The outer x has a value of 10, while the inner x has a value of 20. When we call the foo function, it logs 20 to the console, which is the value of the inner x. However, when we log x outside the function, it refers to the outer x and thus logs 10 to the console.

This demonstrates how variable shadowing affects the visibility and scope of variables in JavaScript. The inner variable shadows the outer variable, making it inaccessible within the inner scope

a line with pins on it

Implications of Variable Shadowing

Variable shadowing can have several implications on the behavior of JavaScript code:


When shadowed, variables create ambiguity, especially when reading and maintaining code. Determining the correct variable becomes more challenging.

Unintended Changes

If an outer-scope variable is shadowed and modified within an inner-scope, it unintentionally changes the code's behavior. This introduces bugs and makes code harder to debug.

Unexpected Results

When variables are shadowed, it can lead to unexpected results when accessing or modifying the variable in different scopes. It's important to be aware of shadowing to avoid unintended consequences.Modifying variables in different scopes can lead to unexpected results when variables are shadowed. It's essential to be aware of shadowing to avoid unintended consequences.

Following best practices when naming variables and understanding the JavaScript scoping rules is crucial to mitigate these issues.

Avoiding Variable Shadowing

To avoid variable shadowing, consider the following best practices:

Choose Descriptive Variable Names

Using descriptive and meaningful names for variables minimizes the chances of inadvertently shadowing variables.

Use Linters

Utilize JavaScript linters like ESLint to detect and warn about variable shadowing in your codebase. Linters help enforce good coding practices and identify potential issues.

Be Mindful of Scope

Understand the scoping rules in JavaScript. Choose appropriate variable names and consider the implications of shadowing. Make sure the variable has the correct scope.


Variable shadowing occurs when a variable declared in an inner scope with the same name as a variable in an outer scope hides the outer variable. This can lead to confusion, unintended changes, and unexpected results.

Therefore, you can eliminate the confusion by understanding the scoping rules and following best practices. This includes descriptive variable names and linters. Being aware of this concept will help you write cleaner, more maintainable JavaScript code.

If you enjoyed this piece, we've crafted a related article delving intoIncluding Framesets Inside Another Frameset in HTML. Explore it here.