I learnt about the term variable shadowing in Eloquent Javascript (Chapter 3), but I am trying to understand a precise, basic example of the concept.
Is this an example of shadowing?
var currencySymbol = "$";
function showMoney(amount) {
var currencySymbol = "€";
document.write(currencySymbol + amount);
}
showMoney("100");
That is also what is known as variable scope.
A variable only exists within its containing function/method/class, and those will override any variables which belong to a wider scope.
That's why in your example, a euro sign will be shown, and not a dollar. (Because the
currencySymbol
containing the dollar is at a wider (global) scope than thecurrencySymbol
containing the euro sign).As for your specific question: Yes, that is a good example of variable shadowing.
so I believe your example is good.
you have a globally named variable that shares the same name as inner method. the inner variable will be used only in that function. Other functions without that variable declaration will use the global one.
Yes, your example is an example of shadowing.
The shadowing will persist in other scenarios too due to how closures work in JavaScript. Here's an example:
Note that in this case, even when xCounter returns, the function it returns still has a reference to its own
x
and invocations of that inner function have no effect on the global, even though the original has long since gone out of scope.