Using The Spread Operator in JavaScript

A very useful feature in JavaScript is the spread operator, which was introduced in ES6 (ECMAScript 2015). The spread operator is a very simple but powerful tool that can help you manipulate arrays and objects.

In this article, we will explore the spread operator in JavaScript and see how we can use it to simplify our code.

What is the spread operator?

The spread operator is denoted by three consecutive dots (…). It is used to expand an iterable object into individual elements. This means that we can use the spread operator to “spread” the elements of an array or object into a new array or object.

The spread operator can be used with any iterable object, including arrays, strings, and objects that implement the iterable protocol.

Using the spread operator with arrays

One of the most common use cases for the spread operator is with arrays. The spread operator can be used to concatenate arrays, create copies of arrays, and pass arrays as arguments to functions.

Let’s explore a few examples.

Concatenating arrays

To concatenate two arrays with the spread operator we can spread the elements of each array into a new array.

For example:

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

And that’s the power of the spread operator! We took two arrays, array1 and array2, and combined them into newArray using the spread operator.

Creating copies of arrays

We can also use the spread operator to create copies of arrays. This is useful when you want to modify an array without affecting the original.

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

The code above copied the elements from originalArray into the copyArray using the spread operator. Now, if we want to manipulate the copyArray, we can do so without changing originalArray.

Passing arrays as arguments

The spread operator can also be used to pass arrays as arguments to functions. This is useful when you want to pass an array as individual arguments to a function that expects multiple arguments.

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

const array = [1, 2, 3];
console.log(sum(...array)); // 6

Using the spread operator with objects

The spread operator is not limited to array manipulations. It can also be used with objects.

When used with objects, the spread operator can be used to merge objects and/or create copies of objects.

Let’s see how to perform these tasks.

Merging objects

To merge two objects, you can use the spread operator to spread the properties of each object into a new object.

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

Creating copies of objects

You can also use the spread operator to create copies of objects. This is useful when you want to modify an object without affecting the original.

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

Conclusion

The spread operator can help us manipulate arrays and objects with ease, making it easier to concatenate arrays, create copies of arrays and objects, and more.

The spread operator allows us to get away with writing shorter code, but we should be careful not to overdo it, as it can be confusing to an outsider.

Special Offer

If you’ve made it to the bottom of this article, congrats. We’d like to offer you our ebook at 70% off. Get the ebook for $3 by following this link.

Note: We do know that some of our readers are in different economies. If you cannot afford the book, send us an email for a free copy: contact (at) javascripttoday.com. Please include your country in the subject line.