> 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/initial-value.md).

# initial value

🚧 施工中

[JS](/web/js.md) ⟩ [variable](/web/js/variable.md) ⟩ initial value

{% hint style="success" %}
[variable declaration](/web/js/variable/declare.md) can assign a [value](/web/js/val.md) to a [variable](/web/js/variable.md).

```javascript
let i = 0, j = 0, k = 0;    // ⭐ in a single declaration
let [u, v] = [3, 4];        // 💡 destructuring assignment
let x = 2, y = x * x;       // ✅ use "previously declared"
let [p, q, ...rest] = [10, 20, 30, 40, 50];    // "rest" operator

// ❌ "destructuring assignment" can't use "previous element"
let [a, b] = [ 2, a * a ];  // ⛔ ReferenceError
```

{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="danger" %}
[const](/web/js/variable/declare/const.md) <mark style="color:red;">**must**</mark>**&#x20;**<mark style="color:yellow;">**be declared**</mark> with an <mark style="color:purple;">**initial value**</mark>:exclamation:
{% endhint %}

{% hint style="warning" %}
if you <mark style="color:red;">**don't**</mark>**&#x20;**<mark style="color:yellow;">**specify**</mark> an <mark style="color:purple;">**initial value**</mark> for a [variable](/web/js/variable.md), its [value](/web/js/val.md) will be assigned [undefined](/web/js/val/prim/undefined.md) <mark style="color:yellow;">**automatically**</mark>.
{% endhint %}

{% hint style="success" %}

* [var hoisting](/web/js/scope/hoist/variable/var.md) - <mark style="color:yellow;">**declaration**</mark> hoisted, <mark style="color:yellow;">**value**</mark> initialized to "[undefined](/web/js/val/prim/undefined.md)".
* [let/const/class hoisting](/web/js/scope/hoist/variable/let-const.md) - <mark style="color:yellow;">**declaration**</mark> hoisted, <mark style="color:yellow;">**value**</mark> "[<mark style="color:red;">**uninitialized**</mark>](/web/js/variable/access/uninitialized.md)"❗️
* [const requires initialization](/web/js/variable/declare/const/require-initial.md) - <mark style="color:red;">**must**</mark>**&#x20;**<mark style="color:yellow;">**have**</mark> with [initial value](/web/js/variable/declare/initial-value.md)❗️
* [function hoisting](/web/js/scope/hoist/function.md) - <mark style="color:yellow;">**declaration**</mark> hoisted, <mark style="color:yellow;">**value**</mark> initialized to a [function](/web/js/val/func.md).
  {% endhint %}
  {% endtab %}

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

* replit：[initial value](https://replit.com/@pegasusroe/initial-value#index.js)

```javascript
let message = "hello";

// 💡 declare multiple variables
let i = 0, j = 0, k = 0;    // ⭐ in a single declaration
let [u, v] = [3, 4];        // ⭐ destructuring assignment

// 💡 destructuring assignment with "rest" operator
let [p, q, ...rest] = [10, 20, 30, 40, 50];

// ✅ initializers can use "previously declared variables"
let x = 2, y = x * x; 

// ❌ but no luck with "destructuring assignment"
// -----------------------------------------------------------
let [a, b] = [ 2, a * a ];  // ⛔ ReferenceError
//                ^
// ⛔ ReferenceError: Cannot access 'a' before initialization
// -----------------------------------------------------------
```

👉 [<mark style="color:red;">**ReferenceError**</mark>](/web/js/err/ref.md)： [cannot access 'xxx' before initialization❗️](/web/js/err/ref/cannot-access-before-init.md)
{% endtab %}

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

* [hoisting](/web/js/scope/hoist.md)<mark style="color:green;">**will**</mark> / <mark style="color:red;">**won't**</mark> <mark style="color:yellow;">**provide**</mark> <mark style="color:purple;">**initial value**</mark> for (<mark style="color:green;">**var**</mark>|<mark style="color:green;">**function**</mark>) / (<mark style="color:red;">**let**</mark>|<mark style="color:red;">**const**</mark>) [declaration](/web/js/grammar/declare.md).
* [default parameter](/web/js/val/func/param/default-parameter.md) uses <mark style="color:purple;">**initial values**</mark>.
* [uninitialized variable](/web/js/variable/access/uninitialized.md) has <mark style="color:red;">**no**</mark> <mark style="color:purple;">**initial values**</mark>, <mark style="color:red;">**not**</mark> [undefined](/web/js/val/prim/undefined.md) <mark style="color:yellow;">**even**</mark>:exclamation:
* [destructuring assignment](/web/js/grammar/op/assign/destruct.md) can be used to provide <mark style="color:purple;">**initial values**</mark>.
  {% endtab %}

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

* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩ 3.10 Variable Declaration & Assignment.
  {% endtab %}
  {% endtabs %}