Spread Operator in JavaScript

The spread operator (...) allows you to expand elements of arrays and objects by obtaining their individual elements.

Introduced in ECMAScript6 (2015), the spread operator is extremely useful for working with arrays, objects, and functions, simplifying many common tasks.

Instead of using more complicated techniques to manipulate data, the spread operator provides a more direct and readable syntax (this improves code readability, which is always a plus 😉).

Spread Operator Syntax

The basic syntax of the spread operator is as follows:

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

Using the Spread Operator with Arrays

Expanding an Array

One of the most common uses of the spread operator is creating new arrays from existing arrays. This is useful for copying arrays or combining several arrays into one:

const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5, 6];

console.log(array2); // Result: [1, 2, 3, 4, 5, 6]

Copying Arrays

The spread operator also allows you to create shallow copies of arrays, which is useful to avoid side effects in data manipulation operations:

const original = [1, 2, 3];
const copy = [...original];

console.log(copy); // [1, 2, 3]

Adding Elements to Arrays

You can use the spread operator to add elements to an existing array without mutating the original array:

const numbers = [1, 2, 3];
const newNumber = 4;
const updated = [...numbers, newNumber];
console.log(updated); // [1, 2, 3, 4]

Concatenating Arrays

Similarly, we can easily concatenate two arrays.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const concatenatedArray = [...array1, ...array2];

console.log(concatenatedArray); // Result: [1, 2, 3, 4, 5, 6]

Manipulating Nested Arrays

The spread operator can also be useful for working with nested arrays:

const matrices = [[1, 2], [3, 4]];
const combined = [].concat(...matrices);
console.log(combined); // [1, 2, 3, 4]

Using the Spread Operator with Objects

Creating New Objects

The spread operator can expand properties of one object into another object, allowing the creation of new objects based on existing objects:

const person = { name: 'Luis', age: 30 };
const address = { street: 'Fake Street', city: 'Springfield' };

const completePerson = { ...person, ...address };

console.log(completePerson); // { name: 'Luis', age: 30, street: 'Fake Street', city: 'Springfield' }

Copying Objects

Just like with arrays, the spread operator allows for shallow copies of objects:

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

const copy = { ...original };

console.log(copy); // { a: 1, b: 2 }

This approach is useful for creating modified versions of objects without altering the original.

Updating Object Properties

You can use the spread operator to update properties of an object without mutating the original object:

const user = { name: 'Ana', age: 25 };

const updated = { ...user, age: 26 };

console.log(updated); // { name: 'Ana', age: 26 }

Passing Arguments to a Function

function add(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];

const result = add(...numbers);

console.log(result); // Result: 6

Destructuring and Spread

In combination with destructuring, the spread operator allows you to extract part of an object and combine it with other values:

const person = { name: 'Luis', age: 28, profession: 'Engineer' };

const { name, ...rest } = person;

console.log(name); // 'Luis'
console.log(rest); // { age: 28, profession: 'Engineer' }