JS โฉ variable โฉ shadowing โฉ var can shadow parameter even in strict mode.
โญ function declaration instantiation
When an execution context is established for evaluating an ECMAScript function ๏ผ
a new formal parameter
Each function body
If the function's formal parameters do not include default value initializers body declarations same parameters โ
If default value initializers exist , a second body declarations โ
Formal parameters functions part other bindings evaluation function body
๐
Copy const { log } = console;
let count = 0 ;
// (*)
// โญ "initialization block" in a for-loop
// ---------------------------------------
// โญโโinitโโโโฎ
for ( let i = 0 ; i <
3
; i
++
) {
// โญ for-loop body (block scope) and the "initialization block"
// are in different scopes, so we can "shadow" the outer `i`
// with a local "let" without any problem.
let i = 1 ;
log (i); // 1, 1, 1
if ( ++ count > 3 ) break ; // prevent infinite loop
}
// โญ case 1: (alters parameter directly)
// ---------------------------------------
// โข parameter `id` is closed over by `defaultID`.
//
// โญโโโ parameter list โโโโฎ
function doUpdate (id , defaultID = () => id) {
id = 5 ; // โ
parameter `id` updated (see (**) below)
log ( defaultID () );
}
// (**)
doUpdate ( 3 ); // โ
5
// โญ case 2: (shadows parameter by local "var")
// ----------------------------------------------
//
// โญโโโ parameter list โโโโฎ
function doesntUpdate (id , defaultID = () => id) {
// ----------------------0
// โ weird situation โ
// ----------------------0
// โ 2.1: can't shadow parameters by "let" variables
// ----------------------------------------------------------
// let id = 5;
// ^^
// โ SyntaxError: Identifier 'id' has already been declared
// ----------------------------------------------------------
log ( defaultID () ); // 3
// โญ 2.2 use "var" instead:
// -------------------------
var id = 5 ; // โ this do shadow parameter `id`
log (id); // 5
log ( defaultID () ); // 3
// ----------------------------------------------------------------
// โญ are "parameter list" and "function body" in the same scope โ
// ----------------------------------------------------------------
//
// โข if so, `var id = 5` should be considered a "redeclaration",
// parameter `id` should be updated by the redeclaration,
// but it's NOT, why โ (see: (***) below)
// (Q: is parameter `i` a "var" ?)
//
// โข if they're not in the same scope, why can't we shadow
// the (outer) parameter `id` with a local "let", like we
// do in a "for-loop"โ (see: (*) above)
//
// ----------------------------------------------------------------
}
// (***)
doesntUpdate ( 3 ); // โ (parameter `id` is not updated)