# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/js/grammar/op/assign/destruct.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.