Suggest an edit

Improve this article

Refine the answer for “What does the ... operator do?”. 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)

## 1. The spread operator

> **Spread** is used to **unpack (expand)** an array or object into individual elements.

### Example with an array

```javascript
const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers, 4, 5];

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

Here `...numbers` "expanded" the array `[1, 2, 3]` into the new array.

### Copying arrays

```javascript
const arr1 = [1, 2, 3];
const arr2 = [...arr1];

console.log(arr2); // [1, 2, 3]
console.log(arr1 === arr2); // false (a new array)
```

This is a **shallow copy**.

### Merging arrays

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

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

### In functions - spreading arguments

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

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

> `...nums` turns `[1, 2, 3]` into `sum(1, 2, 3)`

### Example with an object

```javascript
const user = { name: 'Alex', age: 25 };
const newUser = { ...user, city: 'Paris' };

console.log(newUser); // { name: 'Alex', age: 25, city: 'Paris' }
```

Unpacking properties from one object into another.
If keys match, **the later value overwrites the earlier one**:

```javascript
const merged = { a: 1, ...{ a: 2, b: 3 } };
console.log(merged); // { a: 2, b: 3 }
```

## 2. The rest operator

> **Rest** is used to **collect the remaining elements** into an array or object.
> It works **in the opposite direction** - it does not unpack, it **collects**.

### In arrays:

```javascript
const [first, ...rest] = [1, 2, 3, 4];

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

### In objects:

```javascript
const user = { name: 'Alex', age: 25, city: 'Paris' };
const { name, ...info } = user;

console.log(name); // Alex
console.log(info); // { age: 25, city: 'Paris' }
```

### In functions:

```javascript
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4)); // 10
```

`...numbers` collects all the function's arguments into an **array**.

## Spread vs Rest - the difference

| Feature | Spread | Rest |
|---|---|---|
| What it does | Unpacks | Collects |
| Where it is used | When calling a function, creating an array/object | In a function declaration or destructuring |
| Example | `[...arr]`, `{...obj}`, `fn(...args)` | `function fn(...args)`, `[a, ...rest]` |

## "Before and after" examples

| Before ES6 | With ES6 |
|---|---|
| `arr1.concat(arr2)` | `[...arr1, ...arr2]` |
| `Object.assign({}, obj1, obj2)` | `{...obj1, ...obj2}` |
| `Array.prototype.slice.call(arguments)` | `(...args) => {}` |

## Important to remember

1. **Spread / Rest are shallow**
-> nested objects or arrays are copied by reference.

```javascript
  const obj = { nested: { a: 1 } };
  const copy = { ...obj };
  copy.nested.a = 2;
  console.log(obj.nested.a); // 2
  ```
2. **Spread cannot be used on the right side of an assignment without context**
Wrong: `const ...rest = arr;` - an error
Right: `const [a, ...rest] = arr;`

## Summary

| Context | Behavior of `...` | Example |
|---|---|---|
| **Spread (unpacking)** | Expands an array/object | `[...arr]`, `{...obj}`, `sum(...nums)` |
| **Rest (remainder)** | Collects the remaining elements | `[a, ...rest]`, `function fn(...args)` |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.