# redeclaration

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [grammar](https://lochiwei.gitbook.io/web/js/grammar) ⟩ [declaration](https://lochiwei.gitbook.io/web/js/grammar/declare) ⟩ <mark style="color:purple;">**redeclaration**</mark>

{% hint style="success" %}
🚧
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
JS is <mark style="color:green;">**lenient**</mark> with [var](https://lochiwei.gitbook.io/web/js/variable/declare/var "mention"), <mark style="color:red;">**strict**</mark> with [let](https://lochiwei.gitbook.io/web/js/variable/declare/let "mention").

* [redeclare](https://lochiwei.gitbook.io/web/js/variable/declare/var/redeclare "mention"), even in [strict-mode](https://lochiwei.gitbook.io/web/js/concept/env/js-engine/mode/strict-mode "mention"):exclamation:
* [no-redeclare](https://lochiwei.gitbook.io/web/js/variable/declare/let/no-redeclare "mention"), even in [sloppy-mode](https://lochiwei.gitbook.io/web/js/concept/env/js-engine/mode/sloppy-mode "mention"):exclamation:
  {% endhint %}

{% hint style="info" %}
"<mark style="color:yellow;">**function**</mark>**&#x20;**<mark style="color:purple;">**redeclaration**</mark>" behaves like "<mark style="color:yellow;">**var**</mark>**&#x20;**<mark style="color:purple;">**redeclaration**</mark>".

* the <mark style="color:yellow;">**declaration**</mark> part is <mark style="color:yellow;">**ignored**</mark>.
* the <mark style="color:yellow;">**assignment**</mark> part is <mark style="color:red;">**applied**</mark>:exclamation:( <mark style="color:red;">**even in**</mark> [strict-mode](https://lochiwei.gitbook.io/web/js/concept/env/js-engine/mode/strict-mode "mention"):exclamation:)

:point\_right: [redeclare](https://lochiwei.gitbook.io/web/js/variable/declare/var/redeclare "mention") / [💈範例](#fan-li)
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}

* [redeclare](https://lochiwei.gitbook.io/web/js/variable/redeclare "mention")
  * [var](https://lochiwei.gitbook.io/web/js/variable/redeclare/var "mention")
  * [let](https://lochiwei.gitbook.io/web/js/variable/redeclare/let "mention")
* [redeclare](https://lochiwei.gitbook.io/web/js/val/func/declare/redeclare "mention")
  * [function-in-block-fib](https://lochiwei.gitbook.io/web/js/val/func/declare/function-in-block-fib "mention") - treated as "<mark style="color:purple;">**redeclaration**</mark>" in [sloppy mode](https://lochiwei.gitbook.io/web/js/concept/env/js-engine/mode/sloppy-mode).
    {% endtab %}

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

* [declare](https://lochiwei.gitbook.io/web/js/variable/declare "mention")
* [shadow](https://lochiwei.gitbook.io/web/js/variable/shadow "mention")
  {% endtab %}

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

* replit：[re-declaration](https://replit.com/@pegasusroe/re-declarations#index.js)

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

// ⭐ "redeclarations": (2)
// ------------------------------
// • assignments are always applied. 
//   (in both sloppy/strict mode)

// ⭐ "function in block": (3)(4)
// ------------------------------
// • sloppy mode:
//   • is visible outside the block.
//   • can be considered a "redeclaration".
//   • but the assignment is not applied until the block is run❗
//     ((3) is NOT run, (4) is run.)
//
// • strict mode:
//   • is "local" to the block.
//   • never is a "redeclaration".

// ⭐ "if-false-block"
if (false) {
    // (3)
    // -------------------------------
    // • sloppy mode:
    //   "redeclaration" NEVER happens. (because it never runs)
    // • strict mode:
    //   "function in block" is local to the block,
    //   it never is a "redeclaration".
    function foo() { return 3 }            // this line never runs❗
}

// ⭐ "if-true-block"
if (true) {
    // (4)
    // ---------------------------------
    // • sloppy mode:
    //   "redeclaration" DOES happen. (because it runs)
    // • strict mode:
    //   "function in block" is local to the block,
    //   it never is a "redeclaration".
    function foo() { return 4 }            // this line always runs❗
}

// (1)
// ⭐️ function declaration
// -------------------------
function foo() { return 1 }

// (2)
// ❗ function re-declaration
// ---------------------------
// • declaration: ignored
// • assignment : applied❗
function foo() { return 2 }

// log
console.log(foo());        // • sloppy: 4 ❗
                           // • strict: 2 ❗
```

{% endtab %}

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

* 🚧
  {% endtab %}
  {% endtabs %}