Get full access
Quiz

Explain the concept of the spread operator and its uses

Topics
JavaScript
Edit on GitHub

TL;DR

The spread operator (...) in JavaScript expands the elements of an iterable (like an array) into individual elements, and copies the own enumerable properties of an object into a new object. It is commonly used for copying arrays or objects, merging arrays or objects, and passing elements of an array as arguments to a function.

// Copying an array
const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2); // Output: [1, 2, 3]


// Merging arrays
const arr3 = [4, 5, 6];
const mergedArray = [...arr1, ...arr3];
console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]


// Copying an object
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // Output: { a: 1, b: 2 }


// Merging objects
const obj3 = { c: 3, d: 4 };
const mergedObject = { ...obj1, ...obj3 };
console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }


// Passing array elements as function arguments
const sum = (x, y, z) => x + y + z;
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // Output: 6

The spread operator and its uses

Copying arrays

The spread operator can be used to create a shallow copy of an array. This is useful when you want to duplicate an array without affecting the original array.

const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2); // Output: [1, 2, 3]

Merging arrays

You can use the spread operator to merge multiple arrays into one. This is a concise and readable way to combine arrays.

const arr1 = [1, 2, 3];
const arr3 = [4, 5, 6];
const mergedArray = [...arr1, ...arr3];
console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]

Copying objects

Similar to arrays, the spread operator can be used to create a shallow copy of an object. This is useful for duplicating objects without affecting the original object.

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

Merging objects

The spread operator can also be used to merge multiple objects into one. This is particularly useful for combining properties from different objects.

const obj1 = { a: 1, b: 2 };
const obj3 = { c: 3, d: 4 };
const mergedObject = { ...obj1, ...obj3 };
console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }

Passing array elements as function arguments

The spread operator allows you to pass elements of an array as individual arguments to a function. This is useful for functions that accept multiple arguments.

const sum = (x, y, z) => x + y + z;
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // Output: 6

Further reading

Edit on GitHub