Is this an example of variable shadowing in JavaScript?

Question

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 = "€";
  console.log(currencySymbol + amount);
}

showMoney("100");

Solution 1

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 the currencySymbol containing the euro sign).

As for your specific question: Yes, that is a good example of variable shadowing.

Solution 2

In computer programming, variable shadowing occurs when a variable declared within a certain scope (decision block, method, or inner class) has the same name as a variable declared in an outer scope. This outer variable is said to be shadowed...

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.

Solution 3

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:

var x = -1;
function xCounter() {
    var x = 0;
    return function() {
        ++x;
        return x;
    };
}

console.log(x);   // -1
counter = xCounter();
console.log(counter());   // 1
console.log(counter());   // 2
console.log(x);   // still -1, global was never touched

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.

Solution 4

We cannot define a variable more than once. But we can define in different scopes.

let name="tara"
if(true){
  let name="ali"
  if(true){
    console.log(name)
  }
}

variable shadowing is when a variable in a local scope uses its value instead of a variable in a parent scope.So the local variables value is shadowing over the parents.

in the above code there are two name variables defined but they are not defined in the same scope. so console.log(name) will check the local scope if it finds the name variable it uses it, if not it checks parent scope once finds it, it uses that one so it does not go the root.

Solution 5

var role = "Engineer";
console.log(role);

function displayRole(){
    role = "developer";
    console.log(role);
}

displayRole();
console.log(role);

Notice how the last line of code (console.log) prints developer yet it’s not inside the function scope. This is a good example of shadowing where by the role variable in the global scope has been overwritten by the role in the function scope.

To avoid shadowing, the variable in the function scope should be declared using the var keyword so that it becomes accessible to the function only.

View more solutions

Comments

[Jakub Strebeyko]

The code is fine, but explanation is misleading - what the displayRole() does is not variable shadowing, but namespace collision, leading to overwriting the outer scope's role variable. Shadowing happens exactly by variable re-declaration for a given scope (by adding a var), not its re-assignment - is a conscious design decision, not something happening "by itself" to be avoided. See: github.com/getify/You-Dont-Know-JS/blob/1st-ed/…

[Jakub Strebeyko]

on a second thought, concerning the above, the code is also wrong ;P sorry