# let can't shadow parameter even in sloppy mode❗️

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [variable](https://lochiwei.gitbook.io/web/js/variable) ⟩ [shadowing](https://lochiwei.gitbook.io/web/js/variable/shadow) ⟩ let can't shadow parameter even in sloppy mode.

{% hint style="success" %}
:white\_check\_mark:[](https://lochiwei.gitbook.io/web/js/variable/declare/let "mention") <mark style="color:red;">**can't**</mark>**&#x20;**<mark style="color:yellow;">**shadow**</mark> [param](https://lochiwei.gitbook.io/web/js/val/func/param "mention")(s) <mark style="color:yellow;">**even in**</mark> [sloppy-mode](https://lochiwei.gitbook.io/web/js/concept/env/js-engine/mode/sloppy-mode "mention"):exclamation:
{% endhint %}

{% tabs %}
{% tab title="👥 相關" %}

* [instantiation](https://lochiwei.gitbook.io/web/js/val/func/declare/instantiation "mention")
* [lexical-environment](https://lochiwei.gitbook.io/web/js/concept/execution-context/lexical-environment "mention")
* [param](https://lochiwei.gitbook.io/web/js/val/func/param "mention") / [argument](https://lochiwei.gitbook.io/web/js/val/func/argument "mention")
* [strict-mode](https://lochiwei.gitbook.io/web/js/concept/env/js-engine/mode/strict-mode "mention")
* :white\_check\_mark:[stop-using-var](https://lochiwei.gitbook.io/web/js/variable/declare/var/stop-using-var "mention")
* :exclamation:[param-by-var](https://lochiwei.gitbook.io/web/js/variable/declare/var/param-by-var "mention")
  {% endtab %}

{% tab title="💈範例" %}

* replit：l[et can't shadow parameters](https://replit.com/@pegasusroe/shadow-parameter-by-let#index.js)

```javascript
'use strict';    // ⭐ toggle sloppy/strict mode

const { log } = console;

// ⭐ only "simple" parameters
//    "parameters" / "body declarations" in the same environment record.
function f(x) {
    let x = 1;        // ⛔ SyntaxError
    log(x);
}

// ⭐ "non-simple" parameters exist,
//    "parameters" / "body declarations" in different environment records.
function g(x = 0) {
    let x = 100;      // ⛔ SyntaxError
    log(x);
}

function h(x = 0) {
    var x = 300;      // ❗ "var" do shadow parameter (even in strict mode)
    log(x);
}

function k(x) {
    var x = 400;      // ❗ "var" do shadow parameter
    log(x);
}

//   mode:   sloppy            strict
// -----------------------------------------------
f(10);    // ⛔ SyntaxError    ⛔ SyntaxError
g(20);    // ⛔ SyntaxError    ⛔ SyntaxError
h(30);    // ✅ 300            ✅ 300
k(40);    // ✅ 400            ✅ 400

// ⛔ SyntaxError: Identifier 'x' has already been declared
```

{% endtab %}

{% tab title="📘 手冊" %}

* [js-spec](https://lochiwei.gitbook.io/web/master/ref/js-spec "mention") ⟩&#x20;
  * [FunctionDeclarationInstantiation](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation)
  * [Function Environment Record](https://tc39.es/ecma262/#sec-function-environment-records)
    {% endtab %}

{% tab title="🗣 討論" %}

* [shadowing parameters by local variables?](https://stackoverflow.com/questions/74154964/shadowing-parameters-by-local-variables) (my question)
* [Where are arguments positioned in the lexical environment?](https://stackoverflow.com/questions/61208843/where-are-arguments-positioned-in-the-lexical-environment) ⭐️
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] [ydkjs-scope-and-closures-v.2](https://lochiwei.gitbook.io/web/master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2 "mention") ⟩ Ch. 8 ⟩ [Parameter Scope](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/apA.md#parameter-scope)
  {% endtab %}
  {% endtabs %}