Subscribe

# 10 ways to use the spread operator in JavaScript

• • • • • • • + 112 devs liked it

✍️

Here are 10 ways to use the spread operator in JavaScript

12 Jan, 2021 · 7 min read

I'm sure you've heard of the spread operator in JavaScript (...), it's one of the most powerful operators JavaScript offers and can solve many problems like the ten you will find below.

The spread operator can be used to solve multiple problems you might encounter in JavaScript. This article will teach you how to do the following operations using the spread operator.

In the basic form, the spread operator looks like three dots.

``[...arr];``

We can use the spread operator to copy an array. This is, however, still a shallow clone.

Let's say we have an array called `arr1`, and we want to make a clone of this array called `arr2`.

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

So this way, we can copy a basic array, but be aware it doesn't work for multi-level arrays or arrays with dates or functions. Let's say you have two arrays that you want to merge into one, this happens quite often, and we could use the `concat` method. The spread operator makes this way easier, as you can see below.

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

So now the two arrays (arr1, arr2) are combined into `arr3`.

You can state which one should come first by arranging them differently.

``````const arr3 = [...arr2, ...arr1];
console.log(arr3);
[4, 5, 6, 1, 2, 3];``````

This is a good way to combine arrays. The amount you can add is infinite, so you can keep adding spread operators.

``const output = [...arr1, ...arr2, ...arr3, ...arr4];`` Let's say you have an array but need to add one or multiple items. You can leverage the Array.push, but the spread operator will also work fine.

``````let arr1 = ['this', 'is', 'an'];
arr1 = [...arr1, 'array'];
console.log(arr1);
// [ 'this', 'is', 'an', 'array' ]``````

As you can see, this will add the new string to the end of our existing array.

You can even pass multiple strings.

``````arr1 = [...arr1, 'array', 'cool'];
console.log(arr1);
// [ 'this', 'is', 'an', 'array', 'cool' ]`````` Let's say you have an object of a user, but it's missing an age property.

``````const user = {
firstname: 'Chris',
lastname: 'Bongers',
};``````

We can again leverage the spread operator to add the age to this user object.

``const output = { ...user, age: 31 };``

What happens above is that we spread the user object and add a new property called `age` to it with the value of `31`.

The whole setup will look like this.

``````const user = {
firstname: 'Chris',
lastname: 'Bongers',
};
const output = { ...user, age: 31 };
console.log(output);
// { firstname: 'Chris', lastname: 'Bongers', age: 31 }`````` Let's say you have an array of numbers and want to get the lowest, highest, or the sum of these numbers.

That's another excellent option for the spread operator to shine.

Our input array will look like this

``const arr1 = [1, -1, 0, 5, 3];``

To get the lowest number, we can use the spread operator and the `Math.min method`.

``````const arr1 = [1, -1, 0, 5, 3];
const min = Math.min(...arr1);
console.log(min);
// -1``````

This will output `-1` because that's the lowest number. Try and remove the -1 from the array. You'll see the lowest will become `0`.

To get the highest number we can use the `Math.max` method.

``````const arr1 = [1, -1, 0, 5, 3];
const max = Math.max(...arr1);
console.log(max);
// 5``````

As you can see, the max will return `5`. If we remove the `5` it will return `3`.

If you're curious to see what happens if we don't spread:

``````const arr1 = [1, -1, 0, 5, 3];
const max = Math.max(arr1);
console.log(max);
// NaN``````

This will return `NaN` because JavaScript doesn't know what to max on an array. Let's say we have a function that takes three arguments.

``````const myFunc(x1, x2, x3) => {
console.log(x1);
console.log(x2);
console.log(x3);
}``````

We could call this function in the following manner:

``myFunc(1, 2, 3);``

But what happens if we have an array that we want to pass.

``const arr1 = [1, 2, 3];``

We can now use the spread operator to spread this array into our function.

``````myFunc(...arr1);
// 1
// 2
// 3``````

As you can see, we spread the array into three separate arguments that we pass to the function.

The full call will look like this:

``````const myFunc = (x1, x2, x3) => {
console.log(x1);
console.log(x2);
console.log(x3);
};
const arr1 = [1, 2, 3];
myFunc(...arr1);
// 1
// 2
// 3`````` ## Pass unlimited arguments to a function permalink

Let's say you have a function that takes unlimited arguments. Perhaps they are properties you want to loop over dynamically.

``````const myFunc = (...args) => {
console.log(args);
};``````

We see the following happening if we call this function with multiple arguments.

``myFunc(1, 'a', new Date());``

It will return the following:

``````[
1,
'a',
Date {
__proto__: Date {}
}
]``````

We are then able to loop over the arguments dynamically. ## Converting a nodeList into an array permalink

Let's say you used the spread operator to get all the divs on your page. These will come as a `nodeList`. We can then leverage the spread operator to convert this `nodeList` into an array.

``````const el = [...document.querySelectorAll('div')];
console.log(el);
// (3) [div, div, div]``````

Here you can see we got three divs from the dom.

We can now easily loop over these elements because they are in an array format.

``````const el = [...document.querySelectorAll('div')];
el.forEach((item) => {
console.log(item);
});
// <div></div>
// <div></div>
// <div></div>`````` If you're familiar with destructuring objects, you might find the spread operator to be handy to do this.

Let's say we have an object for the user again.

``````const user = {
firstname: 'Chris',
lastname: 'Bongers',
age: 31,
};``````

We can now destructure this as a single variable using the spread operator.

``````const { firstname, ...rest } = user;
console.log(firstname);
console.log(rest);
// 'Chris'
// { lastname: 'Bongers', age: 31 }``````

As you can see, we parsed the user object and destructured the firstname into the firstname variable and the rest of the object into the `rest` variable. The last use-case for the spread operator is to explode a string.

Let's say we have the following string.

``const str = 'Hello';``

If we then use the spread operator on this string, we will get an array of letters.

``````const str = 'Hello';
const arr = [...str];
console.log(arr);
// [ 'H', 'e', 'l', 'l', 'o' ]``````

There you go, an array of letters. Tweet this tip
• • • • • • • + 112 devs liked it

### Removing all vowels with JavaScript

3 Dec, 2022 · 2 min read ### 10 games to learn JavaScript

2 Dec, 2022 · 3 min read Join 2101 devs and subscribe to my newsletter

• 1000 articles written
• 2101 devs subscribed
• 529116 words written