Check out What is shadow in javascript by test

Content Hierarchy

Definition
Examples you might encountered yet in javascript
Consolidate By Pseudo Examples
Jump With Sophisticated Examples
Summary

Definition on Wikipedia

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. At the level of identifiers (names, rather than variables), this is known as name masking. This outer variable is said to be shadowed by the inner variable, while the inner identifier is said to mask the outer identifier. This can lead to confusion, as it may be unclear which variable subsequent uses of the shadowed variable name refer to, which depends on the name resolution rules of the language.

This nerd version seems abstract and confuse reader more,ignore it now and see instance firstly.

Examples you might encountered yet in javascript

You will encounter when you declare an identifier in a scope that hides one that exists in the containing scope:

var foo='outer'; // The outer one
function example() {
var foo='inner'; // The inner one
console.log(foo)// outer one
}
example();


*
*
write your answer in your notebook now !
*
*
expected answer:inner
*
*
right to next or think about it why wrong
*
*
The varible above could be treated same while replaced by a function datatype.

const foo=()=>{console.log('outer')}; // The outer one
function example() {
var foo=()=>{console.log('inner')};
foo();
}
example();


*
*
write your answer in your notebook now !
*
*
expected answer:inner
*
*
right to next or think about it why wrong
*
*

Consolidate By Pseudo Examples

var x = 1;
if (x === 1)
{
let x = 2;
console.log(x);
}
console.log(x);


*
*
write your answer in your notebook now !
*
*
expected answer 1 :2
expected answer 2 :1
*
*
right to next or think about it why wrong
*
*

var x = 1;
if (x === 1)
{
var x = 2;
console.log(x);
// output: 2
}
console.log(x); // output: 2


*
*
write your answer in your notebook now !
*
*
expected answer 1:2
expected answer 2:2
*
*
right to next or think about it why wrong
*
*
Above two do not apply for shadow definition which occurs in function scope,not other types of block.If you still do not know why it is answered like that,please google let&var&const difference,plenty of stuff could be wondered.

Jump With Sophisticated Examples

function foo() {
function bar(a) {
i = 3;
console.log( a + i );
}
for (var i=0; i<10; i++) {
bar( i * 2 );
}
}
foo();


*
*
write your answer in your notebook now !
*
*
expected answer : infinite answers generating
*
*
right to next or think about it why wrong
*
*
Same identifier i held in bar function scope represent useing of assignment,not shadowed because it was not declarated by let, const or var.Let me disection execution of it below:

var i=0;
bar(i*2)=bar(0=a){i=3;console.log(3)} //3
i++;//i=4 bar(i*2)=bar(8=a){i=3;console.log(11)} // 11
i++;//i=4


*
*
infinite duplication of bar(8=a)
*
*
I change the code into real shadowed identifier as below:

function foo() {
function bar(a) {
let i = 3;
console.log( a + i );
}
for (var i=0; i<10; i++) {
bar( i * 2 );
}
}
foo();


*
*
write your answer in your notebook now !
*
*
expected answer:3,5, 7, 9, 11, 13, 15, 17 ,19,21
*
*
right to next or think about it why wrong
*
*
Let me disection execution of it below:

var i=0;
bar(i*2)=bar(0=a){let i=3;console.log(3)} //3
i++;//i=1
bar(i*2)=bar(2=a){let i=3;console.log(5)} // 5
i++;//i=2
bar(i*2)=bar(4=a){let i=3;console.log(7)} // 7


*
*
Finish yourself
*
*
You could replace 'let' in 'let i = 3;'with 'const', 'var' to declare shadowed indentifier and see the answer which should be the same.

Summary

Keep in mind of these key words: same indentifier,function scope,delcaration.They construct all logic of shadow in javascript.