What does the ... operator do?

JavaScriptJunior~1 min read

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

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

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)`

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.