# initial value

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [variable](https://lochiwei.gitbook.io/web/js/variable) ⟩ initial value

{% hint style="success" %}
[](https://lochiwei.gitbook.io/web/js/variable/declare "mention") can assign a [val](https://lochiwei.gitbook.io/web/js/val "mention") to a [..](https://lochiwei.gitbook.io/web/js/variable "mention").

```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](https://lochiwei.gitbook.io/web/js/variable/declare/const "mention") <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 [..](https://lochiwei.gitbook.io/web/js/variable "mention"), its [val](https://lochiwei.gitbook.io/web/js/val "mention") will be assigned [undefined](https://lochiwei.gitbook.io/web/js/val/prim/undefined "mention") <mark style="color:yellow;">**automatically**</mark>.
{% endhint %}

{% hint style="success" %}

* [var](https://lochiwei.gitbook.io/web/js/scope/hoist/variable/var "mention") - <mark style="color:yellow;">**declaration**</mark> hoisted, <mark style="color:yellow;">**value**</mark> initialized to "[undefined](https://lochiwei.gitbook.io/web/js/val/prim/undefined "mention")".
* [let-const](https://lochiwei.gitbook.io/web/js/scope/hoist/variable/let-const "mention") - <mark style="color:yellow;">**declaration**</mark> hoisted, <mark style="color:yellow;">**value**</mark> "[<mark style="color:red;">**uninitialized**</mark>](https://lochiwei.gitbook.io/web/js/variable/access/uninitialized)"❗️
* [require-initial](https://lochiwei.gitbook.io/web/js/variable/declare/const/require-initial "mention") - <mark style="color:red;">**must**</mark>**&#x20;**<mark style="color:yellow;">**have**</mark> with [initial-value](https://lochiwei.gitbook.io/web/js/variable/declare/initial-value "mention")❗️
* [function](https://lochiwei.gitbook.io/web/js/scope/hoist/function "mention") - <mark style="color:yellow;">**declaration**</mark> hoisted, <mark style="color:yellow;">**value**</mark> initialized to a [func](https://lochiwei.gitbook.io/web/js/val/func "mention").
  {% 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>](https://lochiwei.gitbook.io/web/js/err/ref)： [cannot-access-before-init](https://lochiwei.gitbook.io/web/js/err/ref/cannot-access-before-init "mention")
{% endtab %}

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

* [hoist](https://lochiwei.gitbook.io/web/js/scope/hoist "mention")<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>) [declare](https://lochiwei.gitbook.io/web/js/grammar/declare "mention").
* [default-parameter](https://lochiwei.gitbook.io/web/js/val/func/param/default-parameter "mention") uses <mark style="color:purple;">**initial values**</mark>.
* [uninitialized](https://lochiwei.gitbook.io/web/js/variable/access/uninitialized "mention") has <mark style="color:red;">**no**</mark> <mark style="color:purple;">**initial values**</mark>, <mark style="color:red;">**not**</mark> [undefined](https://lochiwei.gitbook.io/web/js/val/prim/undefined "mention") <mark style="color:yellow;">**even**</mark>:exclamation:
* [destruct](https://lochiwei.gitbook.io/web/js/grammar/op/assign/destruct "mention") can be used to provide <mark style="color:purple;">**initial values**</mark>.
  {% endtab %}

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

* [ ] [javascript-the-definitive-guide](https://lochiwei.gitbook.io/web/master/ref/javascript-the-definitive-guide "mention") ⟩ 3.10 Variable Declaration & Assignment.
  {% endtab %}
  {% endtabs %}