🛸 Shadowing

Useful resources:

• You Don't Know JS Yet: Scope & Closures - 2nd Edition - Chapter 3: The Scope Chain

What is shadowing ?

When you have two or more variables, each in different scope, with the same lexical names.

const city = "Quanzhou"; function printCity(city) { city = city.toUpperCase(); console.log(city); } printCity("Shenzhen"); printCity(city); console.log(city);

1const city = "Quanzhou";
2
3function printCity(city) {
4  city = city.toUpperCase();
5  console.log(city);
6}
7
8printCity("Shenzhen");
9
10printCity(city);
11
12console.log(city);

The city variable (parameter) at line 3 shadows the variable city at line 1. That's why re-assignment of city at line 4 only affects the inner variable, not the outer one.

Illegal Shadowing

Not all combinations of declaration shadowing are allowed. let can shadow var, but var cannot shadow let

function sayCity() { { let city = "Quanzhou"; { var city = "Shenzhen"; console.log(city); } console.log(city); } // var is function-scoped, so city would be accessible here // if it didn't throw a SyntaxError console.log(city); } sayCity()

1function sayCity() {
2  {
3    let city = "Quanzhou";
4    {
5      var city = "Shenzhen";
6      console.log(city);
7    }
8    console.log(city);
9  }
10  // var is function-scoped, so city would be accessible here
11  // if it didn't throw a SyntaxError
12  console.log(city);
13}
14sayCity()

1: [SyntaxError: Identifier 'city' has already been declared]

var at line 4 is trying to 'cross the boundary' of let declaration.

valid. if there is a function boundary in between

function getTodos() { { let userId = 1; (() => { var userId = 7; console.log(userId); })(); console.log(userId); } } getTodos();

1function getTodos() {
2  {
3    let userId = 1;
4
5    (() => {
6      var userId = 7;
7      console.log(userId);
8    })();
9    console.log(userId);
10  }
11}
12
13getTodos();

1: 7 2: 1