> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/variable/declare/const.md).

# const

* [JS](/web/js.md) ⟩ [variable](/web/js/variable.md) ⟩ const
* [JS](/web/js.md) ⟩ [declaration](/web/js/grammar/declare.md) ⟩ [variable](/web/js/variable/declare.md) ⟩ const

{% hint style="success" %}
[⭐️ ES6 (2015)](/web/js/feature/es6.md)

([declaration](/web/js/grammar/declare.md)) declares a <mark style="color:yellow;">**local**</mark>**&#x20;**<mark style="color:orange;">**constant**</mark> in [block scope](/web/js/grammar/statement/other/block/block.md).
{% endhint %}

{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="danger" %} <mark style="color:purple;">**const**</mark>&#x20;

* <mark style="color:red;">**must**</mark>**&#x20;**<mark style="color:yellow;">**have**</mark> an [initial value](/web/js/variable/declare/initial-value.md):exclamation: (:point\_right: [more](/web/js/variable/declare/const/require-initial.md))
* <mark style="color:red;">**can't**</mark>**&#x20;**<mark style="color:yellow;">**be**</mark> <mark style="color:yellow;">**reassigned**</mark>:exclamation:  (:point\_right: [more](/web/js/variable/declare/const/cant-reassign.md))
* <mark style="color:red;">**can't**</mark>**&#x20;**<mark style="color:yellow;">**be**</mark> [<mark style="color:yellow;">**redeclared**</mark>](/web/js/grammar/declare.md):exclamation:
  {% endhint %}

{% hint style="danger" %}
:no\_entry: <mark style="color:red;">**ReferenceError**</mark>: [<mark style="color:yellow;">**cannot access '...' before initialization**</mark>](/web/js/err/ref/cannot-access-before-init.md).

* caused by referencing a [let](/web/js/variable/declare/let.md)/ [const](/web/js/variable/declare/const.md)/ [class](/web/js/val/class.md) in its [temporal dead zone](/web/js/variable/access/tdz.md):exclamation:
  {% endhint %}

{% hint style="info" %}
:white\_check\_mark: it's <mark style="color:yellow;">**common**</mark> to declare <mark style="color:purple;">**const**</mark> using <mark style="color:yellow;">**capital letters**</mark>.
{% endhint %}

{% hint style="danger" %} <mark style="color:yellow;">**using**</mark> [typeof](/web/js/val/type/name/typeof.md) on [lexical declaration](/web/js/grammar/declare/lexical-declaration.md) ([let](/web/js/variable/declare/let.md)/ [const](/web/js/variable/declare/const.md)/ [class](/web/js/val/class.md)) in its [temporal dead zone](/web/js/variable/access/tdz.md) will throw a [<mark style="color:red;">**ReferenceError**</mark>](/web/js/err/ref/cannot-access-before-init.md).&#x20;

```javascript
// ⭐ temporal dead zone (start)
// ------------------------------
typeof aLet;       // ⛔ ReferenceError: Cannot access 'aLet' before initialization
typeof aConst;     // ⛔ ReferenceError: Cannot access 'aConst' before initialization
typeof aClass;     // ⛔ ReferenceError: Cannot access 'aClass' before initialization

typeof undeclared;        // ❗ 'undefined'

// ⭐ lexical declarations (let/const/class)
// --------------------------------------------
let aLet;                 // ⭐ initialized to `undefined`
const aConst = "hello";
class aClass {}
```

* replit：[TDZ: let/const/class](https://replit.com/@pegasusroe/TDZ-letconstclass#index.js)
  {% endhint %}
  {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %} <mark style="color:purple;">**const**</mark>&#x20;

* is a [reserved word](/web/js/grammar/token/keyword/reserved.md):exclamation:
* <mark style="color:red;">**must**</mark> be <mark style="color:yellow;">**initialized**</mark> at <mark style="color:yellow;">**declaration**</mark>. 👉 [const requires initialization](/web/js/variable/declare/const/require-initial.md)
* <mark style="color:red;">**can't**</mark>**&#x20;**<mark style="color:yellow;">**be**</mark> <mark style="color:yellow;">**reassigned**</mark>.  👉 [const can't reassign](/web/js/variable/declare/const/cant-reassign.md)
* <mark style="color:red;">**can't**</mark>**&#x20;**<mark style="color:yellow;">**be**</mark> [<mark style="color:yellow;">**redeclared**</mark>](/web/js/grammar/declare.md).
  {% endhint %}

{% hint style="warning" %} <mark style="color:purple;">**const**</mark>&#x20;

* <mark style="color:green;">**can**</mark>**&#x20;**<mark style="color:yellow;">**be used**</mark> with [for-in](/web/js/grammar/statement/loop/for/in.md) / [for-of](/web/js/grammar/statement/loop/for/of.md) loop.
* <mark style="color:red;">**can't**</mark> <mark style="color:yellow;">**be used**</mark> with a <mark style="color:yellow;">**classic for-loop**</mark>.&#x20;

👉 [no const for classic "for"](/web/js/variable/declare/const/no-for-loop.md):exclamation:
{% endhint %}
{% endtab %}

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

* [const requires initialization](/web/js/variable/declare/const/require-initial.md):exclamation:
* [const can't reassign](/web/js/variable/declare/const/cant-reassign.md):exclamation:
* [no const for classic "for"](/web/js/variable/declare/const/no-for-loop.md):exclamation:
* [temporal dead zone](/web/js/variable/access/tdz.md):exclamation:
  {% endtab %}

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

* compare： [let](/web/js/variable/declare/let.md), [var](/web/js/variable/declare/var.md)
  {% endtab %}

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

* [ ] [Statements and declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) ⟩ [declaring variables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#declaring_variables) ⟩ [const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
  {% endtab %}
  {% endtabs %}