The JavaScript spread operator is very useful for many things that we may not have known it can do.
In this article, we’ll look at why it’s useful.
Spreading Function Calls
The spread operator can be used to spread an array of objects and values into arguments.
For example, we can write:
const min = Math.min(...[1, 2, 2, 3, 5]);
to find the minimum number from an array.
It’s much better than using apply to do the same thing since we don’t have to pass in the value of this as the first argument.
Copying Arrays
We can use the spread operator to shallow copy one array into another.
For example, if we have:
const arr = [1, 2, 3];
const arrCopy = [...arr];
When we log the values of both, we’ll see that they have the same value, but when we log the value of:
arr === arrCopy
We see that it’s false . Therefore, we know that they aren’t referencing the same array.
Concatenate Arrays
We can apply the spread operator to concatenate multiple arrays by applying it to multiple arrays.
For instance, we can write:
const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
const arr = [...arr1, ...arr2];
Then we get that the value of arr is:
[0, 1, 2, 3, 4, 5]
It’s much easier than using the concat method to attach 2 arrays together.
Copying Objects
We can also use the spread operator to copy objects. For example, we can write:
const obj = {
a: 1,
b: 2
};
const objCopy = {
...obj
};
Then when we log the value of both, we’ll get the same value.
And when we log the value of:
obj === objCopy
We’ll get see false log. This means that obj and objCopy aren’t referencing the same object but have the same content.
Merging Objects
We can use the spread operator to merge objects into one. If a property has the same name in multiple objects, then the value of the last one will overwrite the previous ones.
For example, if we write the following, then we get:
const obj = {
a: 1,
b: 2
};
const obj2 = {
a: 3,
c: 2
};
const mergedObj = {
...obj,
...obj2
};
We get the value of mergedObj is:
{a: 3, b: 2, c: 2}
Converting Array-Like Objects to Arrays
We can convert array-like objects to arrays with the spread operator.
Array-like objects include objects like Sets , Map s, arguments object, Node lists, and anything else that has a Symbol.iterator method.
For example, we can use it to convert a Node list to an array of DOM nodes objects as follows.
Given that we have the following HTML:
<div>
foo
</div>
<div>
bar
</div>
We can find the div with the text ‘bar’ inside as follows:
const divs = [...document.querySelectorAll('div')];
const barDiv = divs.find(div => div.innerText === 'bar');
Once we converted the Node list returned by querySelectorAll with the spread operator, we can use any array methods like find to do what we want.
Node list do not have any array methods, but they can be looped through with loops, has a length property and each entry have an index.
Likewise, we can convert Set s to arrays as follows:
const arr = [...new Set([1, 2, 3, 3])];
Then we get that the value of arr is:
[1, 2, 3]
We can do the same with the other kinds of array-like objects.
Set Operations
Since arrays have many methods for filtering data, we can use these methods to do common set operations that can’t be done with the Set instance itself since they don’t have methods to do those things.
We can do things like set unions and intersections by convert Sets to arrays and then do the operations with array methods, and then we can convert the array result back to a set.
For instance, if we want to find an intersection of 2 Sets, we can write:
const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);
const intersection = [...setA, ...setB].filter(el => [...setA].includes(el) && [...setB].includes(el));
console.log(new Set(intersection));
Then we get that intsection has the element 3 in it only since 3 is in both setA and setB .
What we did was that we converted setA and setB to arrays and then called filter on the merged array with both Sets spread into one big array.
Then we called filter on the array with the predicate:
[...setA].includes(el) && [...setB].includes(el)
to find the elements that are in both sets.
Finally, we converted the resulting array back to a Set by passing it back in the Set constructor.
Conclusion
The spread operator is useful for shallow copying arrays and objects.
It can also be used for merging both arrays and objects.
We can also convert array-like objects easily to arrays with it so that we can call arrays methods on it which aren’t available on array-like objects.
This makes finding things in them and doing operations with Sets much easier.
