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

# spread operator (...)

\[...iterable], {...obj}, f(...iterable).

[JS](/web/js.md) ⟩ [statement](/web/js/grammar/statement.md) ⟩ [expression](/web/js/grammar/statement/expr.md) ⟩ [operator](/web/js/grammar/op.md) ⟩ spread

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

* expands an [**iterable**](/web/js/iteration/iterable.md) in places where [**arguments**](/web/js/val/func/argument.md) <mark style="color:yellow;">**/**</mark> [**elements**](/web/js/val/builtin/arr/element.md) are expected.&#x20;
* adds [**all enumerable own**](/web/js/val/obj/prop/enumerate.md) <mark style="color:yellow;">**properties**</mark> of an **object** to an [**object literal**](/web/js/val/obj/create/obj.md).

```javascript
f(...iterable)                // spread arguments
[...iterable, 1, 2, 3]        // spread elements
{...obj, key: 'value'}        // spread properties ⭐️ 

// shallow copy
let arr = [1,2,3];
let copy = [...arr];
```

:warning: <mark style="color:purple;">**spread operator**</mark>**&#x20;(**[**...**](/web/js/grammar/token/punctuator/3-dots-....md)**)** <mark style="color:yellow;">**is**</mark>**&#x20;**<mark style="color:red;">**not**</mark> a true operator, it <mark style="color:red;">**cannot**</mark> be evaluated to produce a value:exclamation: (:point\_right: [table of operators](/web/js/grammar/op/table-of-operators.md))
{% endhint %}

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

* <mark style="color:purple;">**...obj**</mark> <mark style="color:red;">**only**</mark>**&#x20;**<mark style="color:yellow;">**spreads**</mark> [<mark style="color:orange;">**enumerable own**</mark>**&#x20;properties**](/web/js/val/obj/prop/enumerate.md), 👉 [property enumeration](/web/js/val/obj/prop/enumerate.md).&#x20;
* can be used to assign default values instead of using [Object.assign()](/web/js/val/obj/extend/object.assign.md).
* [destructuring assignment](/web/js/grammar/op/assign/destruct.md)
* [rest operator (...)](/web/js/grammar/op/rest-operator-....md)
* <mark style="color:purple;">**spread operator (...)**</mark>&#x20;
  * can be used in an [**array literal**](/web/js/val/builtin/arr/create/arr.md).
  * "spreads out" an [iterable](/web/js/iteration/iterable.md) into <mark style="color:yellow;">**array elements**</mark> or <mark style="color:yellow;">**function arguments**</mark>.&#x20;
* :information\_source: punctuators used： [3 dots (...)](/web/js/grammar/token/punctuator/3-dots-....md)
  {% endtab %}

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

```javascript
const defaults = {x: 0, y: 0, z: 0};    // default values
let r = {x: 3};
r = {...defaults, ...r};                // { x: 3, y: 0, z: 0 }
```

{% endtab %}

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

* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩ 6.10.4 Spread Operator&#x20;
  {% endtab %}

{% tab title="📘 手冊" %}

* [Spread syntax (...)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
* [Rest parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters)
  {% endtab %}
  {% endtabs %}