What is Variable Shadowing in JavaScript?

To understand variable shadowing in JavaScript, first, we need to understand the scope.

In JavaScript, we have global scope, function scope, and block scope.

The scope is something like a box, that has other boxes inside it. Each box represents a scope. When a variable is scoped, it means that this variable is accessible only inside this specific scope. However, these variables are not accessible outside of this scope, the box.

The scope box is a separate memory box and different variables act differently depending on scope. In some cases, they cannot be accessible outside of the current scope while others can.

The variable declared with var is global-scoped and function-scoped, meaning that if we create a variable inside of a function it will not be accessible outside the function.
The let and const keywords are also function-scoped but at the same time, they are block-scoped. This means that in a block of code consisting of curly braces, e,g else-if conditions, switch statements, or loops, they will not be accessible if they are declared inside of them.

If you have not already make sure to read my post about Variable Declarations in JavaScript.

Now, once you understand the scope better let’s understand what shadowing is in JavaScript.

Variable Shadowing

Imagine that you created two variables with exactly the same name but different values. The difference us that they are located in different scopes. One of them is located in the global scope while the other is in the function.

As you see I have two console logs. What will be logged to the console? Which value is it going to be, apple or orange?

First, it will be orange, then it will be an apple. Why?

When we declare a variable in the function scope while having a variable with the exact same name in the outer scope (global scope in this case), the value assigned in the inner scope is the value that will be stored in the memory. The inner scope usually is supposed to have access to the outer scope however when we declare variables with the same name, things change.

This is called shadowing or variable shadowing in JavaScript. The inner scope variable shadowed the outer scope variable.

But why is the result value apple in the second console log?

Because the variable will be gone from the memory when the function ends and it doesn’t go outside of it. This happens due to the scope hierarchy in JavaScript. The priority of scopes goes from inner-most to outer-most scope. In other words, the inner scope has more priority than the outer scope. That is why, the variables inside the function are prioritized and then when the function ends, they are gone from the memory.

The same applies to block scope because the let keyword is also block-scoped.

Let's use the same example but use var inside a function scope. The var keyword is also function-scoped so it will behave the same way.

Next, use the var but in a block. As a reminder, var is not block-scoped so it isn’t trapped there.

As you see, things change here. The var keyword value changed because it is not block-scoped and it’s not scoped. As a result, no variable shadowing happens here.

Illegal Shadowing

Besides just shadowing, we also have illegal shadowing in JavaScript. It means that we have some restrictions.

If you create a variable in an outer scope with the let keyword and another variable with the var keyword in a block scope but with the same name, it will throw an error. This is called illegal shadowing.

This happens because let and var both technically have the same scope meaning that the variable name fruit already exists there. The variable declared with the var in the block scope is not trapped in the block scope and is accessible to the parent, the function.

Is variable shadowing good or bad?

If we have a variable declared and it's shadowed inside another scope, we lose access to the original variable. This can lead to unneeded bugs and results will be harder to debug. You might not always find where the original value got overridden.

That’s why it’s always better to name variables in a more explanatory way, so it describes their purpose. It’s also recommended to keep the code organized and group the variable declarations together, instead of spreading them across the code. By having all variables together, it is easier to notice if you are declaring anything with a repetitive name.

In conclusion, understanding variable shadowing in JavaScript is important as it affects the accessibility and behavior of variables within a scope. Variable shadowing occurs when an inner scope declares a variable with the same name as an outer scope. This results in the inner scope’s variable overriding the outer scope’s variable and shadowing it. However, it’s essential to avoid illegal shadowing, which occurs when two variables with the same name are declared within the same scope using different keywords, such as let and var. Shadowing can lead to bugs and confusing results, so it’s recommended to use descriptive names for variables and keep them organized.

📌 Enjoyed the post? Please let me know in the comment down below!