> 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/grammar/op/assign/destruct.md).

# destructuring assignment

[JS](/web/js.md) ⟩ [operator](/web/js/grammar/op.md) ⟩ [assignment](/web/js/grammar/op/assign.md) ⟩ destructuring

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

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

* <mark style="color:yellow;">**right-hand**</mark> side： an [**array**](/web/js/val/builtin/arr.md) / [**object**](/web/js/val/obj.md) (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](/web/js/val/builtin/arr/create/arr.md) / [object literal](/web/js/val/obj/create/obj.md) syntax.

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

{% endhint %}

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

* [destructuring array](/web/js/grammar/op/assign/destruct/arr.md)
* [destructuring array](/web/js/grammar/op/assign/destruct/arr.md) (e.g. [\*integers()](/web/js/iteration/generator/examples/integers.md))
* [object destructuring](/web/js/grammar/op/assign/destruct/obj.md)
* [nested destructuring](/web/js/grammar/op/assign/destruct/nested.md)
* [destructuring arguments](/web/js/grammar/op/assign/destruct/args.md)
  * [rest parameters as object](/web/js/val/func/param/rest-parameters/rest.md)
    {% endtab %}

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

* <mark style="color:purple;">**destructuring assignment**</mark> can be used to provide [initial value](/web/js/variable/declare/initial-value.md)(s).
* often used in [tagged template](/web/js/val/prim/str/template-literal/tagged-template.md).
* [spread operator (...)](/web/js/grammar/op/spread.md)
* can be used with [iterable](/web/js/iteration/iterable.md)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](/web/master/ref/website/freecodecamp.md) ⟩ [How to Use Array and Object Destructuring in JavaScript](https://www.freecodecamp.org/news/array-and-object-destructuring-in-javascript/)
* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩&#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 %}