shadowing parameters by local variables?

Question

(edit) I found out there's another post: "Where are arguments positioned in the lexical environment?" that is directly related to my question.

---

When I was reading "You Don't Konw JS", I did some experiments to shadow parameters by declaring local variables in the function, and then I met some weird situations that I am not able to explain, so I posted my code here to seek some help.

Please take a look at the "case 2" of the following code, and see if you can tell what's happening, thanks.

My questions: (in "case 2")

• Are "parameter list" and "function body" in the same scope ?
  • if so, var id = 5 should be considered a "redeclaration", parameter id would be updated by the redeclaration, but it's NOT, why ? (see: (***) below)
  • 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: (*) below)

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) {

    // ----------------------
    //  ❓ weird situation ❓
    // ----------------------
    
    // ❗ 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` would 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)

Answer 1

Your problem is not related to scope. It has to do with the re-declaration of a variable.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#description:

Duplicate variable declarations using var will not trigger an error, even in strict mode, and the variable will not lose its value, unless another assignment is performed.

This is exactly what you are doing in case 2: you re-declare id with the var keyword and you assign it a new value.

The scope is simply the function scope.

These examples might clarify things concerning function scope. They illustrate the fact that OP's defaultID function simply creates a closure over id and when a new variable id is created, the reference in the defaultID function can no longer be accessed in the body of doesntUpdate.

Control example

const main = () => {
  const x = 1;

  const fn = (
    fnX,
    adder = () => { // Variable "adder" contains a function which creates
                    // its own function scope with a closure over "fnX".
      fnX = fnX + 2;
    },
    multiplier = () => { // Same here.
      fnX = fnX * 2;
    },
  ) => {
    console.log('fnX (before)', fnX);

    const added = adder();
    fnX = 5;
    const multiplied = multiplier();

    console.log('fnX (after)', fnX);
    console.log('fnX === x', fnX === x);
  };

  fn(x);
};

main();

Example with var re-declaration:

const main = () => {
  const x = 1;

  const fn = (
    fnX,
    adder = () => {
      fnX = fnX + 2;
    },
    multiplier = () => {
      fnX = fnX * 2;
    },
  ) => {
    console.log('fnX (before)', fnX);

    const added = adder();
    var fnX = 5; // fnX is now a "new" variable, it replaced the one
                  // with the same name which was created as an argument.
                  // "adder" and "multiplier" still operate on the
                  // initial variable but that variable can no longer
                  // be referenced in the body of "fn".
    const multiplied = multiplier();

    console.log('fnX (after)', fnX);
    console.log('fnX === x', fnX === x);
  };

  fn(x);
};

main();

NOTE: I created a main function so we don't have to wonder about global or module context.