# destructuring assignment

[JS](../../..) ⟩ [operator](..) ⟩ [assignment]() ⟩ destructuring

{% hint style="success" %}
[es6](../../../feature/es6 "mention")&#x20;

in a <mark style="color:purple;">**destructuring assignment**</mark>,&#x20;

* <mark style="color:yellow;">**right-hand**</mark> side： an [**array**](../../../val/builtin/arr) / [**object**](../../../val/obj) (a “structured” value)&#x20;
* <mark style="color:yellow;">**left-hand**</mark> side： <mark style="color:yellow;">**specifies**</mark> one or more <mark style="color:orange;">**variable names**</mark> using a syntax that mimics [array](../../../val/builtin/arr/create/arr) / [object literal](../../../val/obj/create/obj) syntax.

```javascript
// destructuring assignment
let {a} = {a: 1, b: 2};
let [a, b=0, , ...rest] = iterable;
```
{% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}
* [arr](destruct/arr "mention")
* [arr](destruct/arr "mention") (e.g. [integers](../../../iteration/generator/examples/integers "mention"))
* [obj](destruct/obj "mention")
* [nested](destruct/nested "mention")
* [args](destruct/args "mention")
  * [rest](../../../val/func/param/rest-parameters/rest "mention")
{% endtab %}

{% tab title="👥 相關" %}
* <mark style="color:purple;">**destructuring assignment**</mark> can be used to provide [initial-value](../../../variable/declare/initial-value "mention")(s).
* often used in [tagged-template](../../../val/prim/str/template-literal/tagged-template "mention").
* [spread](../spread "mention")
* can be used with [iterable](../../../iteration/iterable "mention")s.
{% endtab %}

{% tab title="💈範例" %}
```javascript
// ⭐ array destructuring
let [
    a,
    b = 0,                   // default value
    ,                        // ignore element
    ...rest                  // rest elements as an "array"
] = array

// ⭐ object destructuring
let {
    a,
    b = 0,                    // default value
    c: newPropName,           // new variable name
    ...rest                   // rest properties as an "object"
} = object

// ⭐ smart function parameters
function f(a, b, {
    c,
    d: newPropName = 0,       // new parameter name (with default value)
    ...rest
} = {}){ 
    // do something with: a, b, c, newPropName, rest
}
```
{% endtab %}

{% tab title="📗 參考" %}
* [ ] JS.info ⟩ [Destructuring Assignment](https://javascript.info/destructuring-assignment)
* [ ] [freecodecamp](../../../../master/ref/website/freecodecamp "mention") ⟩ [How to Use Array and Object Destructuring in JavaScript](https://www.freecodecamp.org/news/array-and-object-destructuring-in-javascript/)
* [ ] [javascript-the-definitive-guide](../../../../master/ref/javascript-the-definitive-guide "mention") ⟩&#x20;
  * [ ] 3.10.3 Destructuring Assignment
  * [ ] 8.3.5 Destructuring Function Arguments into Parameters
{% endtab %}

{% tab title="📘 手冊" %}
* [Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
{% endtab %}
{% endtabs %}
