# The JavaScript Spread Operator

> Learn how JavaScript spread syntax expands iterables into arrays or function arguments and copies enumerable properties into object literals.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2019-06-08 | Updated: 2026-07-18 | Topics: [JavaScript](https://flaviocopes.com/tags/js/) | Canonical: https://flaviocopes.com/javascript-spread-operator/

The spread syntax `...` expands values in three places:

- an iterable into a function's arguments
- an iterable into an array literal
- an object's own enumerable properties into an object literal

Although people call it the spread operator, the specification defines it as syntax. See the [MDN spread syntax reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) for the complete rules.

Let's start with an array example. Given

```js
const a = [1, 2, 3]
```

you can create a new array using

```js
const b = [...a, 4, 5, 6]
```

You can also create a shallow copy of an array:

```js
const c = [...a]
```

Object spread creates a shallow copy of an object's own enumerable properties:

```js
const newObj = { ...oldObj }
```

It does not copy the prototype or non-enumerable properties. Nested objects are still shared with the original.

Strings are iterable, so spreading a string creates an array of Unicode code points:

```js
const hey = 'hey'
const arrayized = [...hey] // ['h', 'e', 'y']
```

You can also spread an iterable into a function call:

```js
const add = (a, b) => a + b
const numbers = [1, 2]

add(...numbers) //3
```

## Spread and rest are different

Rest syntax also uses `...`, but it does the opposite. Spread expands values, while rest collects them.

The **rest element** is useful with array destructuring:

```js
const numbers = [1, 2, 3, 4, 5]
const [first, second, ...others] = numbers
```

Spread passes the collected values as separate arguments:

```js
const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const result = sum(...numbers)
```

ES2018 introduced rest and spread properties for objects.

**Rest properties**:

```js
const { first, second, ...others } = {
  first: 1,
  second: 2,
  third: 3,
  fourth: 4,
  fifth: 5
}

first // 1
second // 2
others // { third: 3, fourth: 4, fifth: 5 }
```

**Spread properties** create a new object from existing properties:

```js
const items = { first, second, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }
```

You can merge simple objects too. Later properties overwrite earlier properties with the same name:

```js
const object1 = {
  name: 'Flavio'
}

const object2 = {
  age: 35
}

const object3 = { ...object1, ...object2 }
```