What are the advantages of using the spread operator with arrays and objects?

TL;DR

The spread operator (...) in JavaScript allows you to easily copy arrays and objects, merge them, and add new elements or properties. It simplifies syntax and improves readability. For arrays, it can be used to concatenate or clone arrays. For objects, it can be used to merge objects or add new properties.

// Arrays
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

// Objects
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

Advantages of using the spread operator with arrays and objects

Arrays

Cloning arrays

The spread operator allows you to create a shallow copy of an array easily.

const originalArray = [1, 2, 3];
const clonedArray = [...originalArray];
console.log(clonedArray); // [1, 2, 3]

Merging arrays

You can concatenate multiple arrays into one.

const array1 = [1, 2];
const array2 = [3, 4];
const mergedArray = [...array1, ...array2];
console.log(mergedArray); // [1, 2, 3, 4]

Adding elements

You can add new elements to an array without mutating the original array.

const array = [1, 2, 3];
const newArray = [...array, 4, 5];
console.log(newArray); // [1, 2, 3, 4, 5]

Objects

Cloning objects

The spread operator allows you to create a shallow copy of an object.

const originalObject = { a: 1, b: 2 };
const clonedObject = { ...originalObject };
console.log(clonedObject); // { a: 1, b: 2 }

Merging objects

You can merge multiple objects into one.

const object1 = { a: 1 };
const object2 = { b: 2 };
const mergedObject = { ...object1, ...object2 };
console.log(mergedObject); // { a: 1, b: 2 }

Adding properties

You can add new properties to an object without mutating the original object.

const object = { a: 1, b: 2 };
const newObject = { ...object, c: 3 };
console.log(newObject); // { a: 1, b: 2, c: 3 }

Caveat: the copy is shallow

The spread operator only copies the top level. Nested objects and arrays are shared by reference, so mutating a nested value affects both copies.

const original = { a: 1, nested: { b: 2 } };
const copy = { ...original };

copy.nested.b = 99;
console.log(original.nested.b); // 99 (the nested object is shared)

For a fully independent copy, use structuredClone(original) or another deep-clone approach.

Exercises

Beta