A scene from the movie Nosferatu 1922

Understanding ‘Variable Shadowing’ with JavaScript

Mayumi Nishimoto
5 min readApr 25, 2020

What is ‘variable shadowing’ and why it should be avoided.

Before we go straight to the definition, it is important to observe that a more comprehensive understanding of variable shadowing requires knowledge of two other fundamental programming concepts. Firstly, the importance of naming variables and, secondly, local variables and scoping rules.

What is ‘variable shadowing’? Variable shadowing occurs when a variable of an inner scope is defined with the same name as a variable in the outer scope. In the inner scope, both variables’ scope overlap.

Circle-circle intersection to describe the idea of inner vs. outer scope

According to variable scoping rules, the inner scope should always be able to access a variable defined in the outer scope, but in practice, shadowing will prevent that from happening. Let’s look at these two examples:

Example 1

--

--

Mayumi Nishimoto

Software Engineer in tireless pursuit of improving my craft and in a journey to learn by sharing with the community.