Suggest an edit

Improve this article

Refine the answer for “Spread operator”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What the **spread operator** is

> **Spread (**`...`**)** is syntax that **expands (unpacks)** an array, object, or other iterable structure into *individual elements*.

From the English word *spread*.

---

## 1. Spread in arrays

### Copying an array

```javascript
const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // create a shallow copy

arr2.push(4);

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4]
```

> Unlike `arr2 = arr1`, this is a **new array**,
> not a reference to the same object in memory.

---

### Merging arrays

```javascript
const a = [1, 2];
const b = [3, 4];
const result = [...a, ...b];

console.log(result); // [1, 2, 3, 4]
```

> A shorter and more readable alternative to `a.concat(b)`.

---

### Inserting elements

```javascript
const arr = [2, 3];
const newArr = [1, ...arr, 4, 5];

console.log(newArr); // [1, 2, 3, 4, 5]
```

> Spread can be used *anywhere in the array*.

---

### Converting a string to an array

```javascript
const str = 'Hello';
const chars = [...str];

console.log(chars); // ['H', 'e', 'l', 'l', 'o']
```

> Strings are iterable, so `...` expands every character.

---

## 2. Spread in objects (ES2018+)

### Copying an object

```javascript
const user = { name: 'Oleh', age: 25 };
const copy = { ...user };

console.log(copy); // { name: 'Oleh', age: 25 }
console.log(copy === user); // false (a new object)
```

---

### Merging objects

```javascript
const defaults = { theme: 'light', lang: 'en' };
const settings = { theme: 'dark' };

const merged = { ...defaults, ...settings };

console.log(merged); // { theme: 'dark', lang: 'en' }
```

> Properties on the right **overwrite** the earlier ones.

---

### Adding new properties while copying

```javascript
const user = { name: 'Oleh' };
const updated = { ...user, age: 25, city: 'Kyiv' };

console.log(updated); // { name: 'Oleh', age: 25, city: 'Kyiv' }
```

---

## 3. Spread in function arguments

Spread can be used to **pass an array as a set of arguments**.

### Example:

```javascript
function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6
```

> This is equivalent to calling `sum(numbers[0], numbers[1], numbers[2])`.

---

### Together with `Math`

```javascript
const nums = [3, 7, 1];
console.log(Math.max(...nums)); // 7
```

> Without spread you would have to write `Math.max.apply(null, nums)`: cumbersome.

---

## 4. Spread for cloning and "immutability"

In React, Redux, and other frameworks, you often need to **create new objects/arrays**
instead of changing the old ones. Spread is a perfect fit:

```javascript
const state = { count: 1 };
const newState = { ...state, count: state.count + 1 };

console.log(newState); // { count: 2 }
```

> This way we do not change `state`, we create a new version (immutability).

---

## 5. Spread in destructuring

It can be used to collect the "rest" of the values.

```javascript
const user = { name: 'Oleh', age: 25, city: 'Kyiv' };
const { name, ...rest } = user;

console.log(name); // "Oleh"
console.log(rest); // { age: 25, city: 'Kyiv' }
```

> This is called **rest syntax**, and it looks like spread,
> but works *in the opposite direction*: it collects the remainder.

---

## 6. Spread with collections

```javascript
const set = new Set([1, 2, 3]);
const arr = [...set];
console.log(arr); // [1, 2, 3]
```

> Spread works with **all iterable structures**:
> arrays, strings, `Set`, `Map.keys()`, `Map.values()`, and so on.

---

## 7. Spread is a shallow copy

> Spread does not make a "deep copy" of nested objects.

```javascript
const user = { name: 'Oleh', address: { city: 'Kyiv' } };
const copy = { ...user };

copy.address.city = 'London';
console.log(user.address.city); // "London"
```

> If you need a full clone, use `structuredClone()` or `JSON.parse(JSON.stringify(obj))`.

---

## Summary

| Where it applies | What it does |
|---|---|
| Arrays | Copying, merging, adding elements |
| Objects | Copying and merging properties |
| Functions | Passing an array as a list of arguments |
| Iterable structures | Expanding elements (`Set`, `Map`, `string`, and so on) |

---

## In short

> **The spread operator (**`...`**)** expands (unpacks) iterable values.
> It works with arrays, objects, strings, and collections.
> It simplifies copying, merging, and passing data.
> It makes a **shallow copy**, not a deep one.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts730 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.