Spread operator

JavaScriptJunior~2 min read

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.

Short Answer

Interview ready

Premium

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