The ES6 Spread Operator is a powerful tool for any JavaScript developer to have in their toolkit. It’s a set of three dots (...) that can be used to “spread out” the elements of an iterable object, like an array, map, set, or object.

For example, imagine you have an array of numbers called arr that looks like this: [1, 2, 3, 4, 5]. Instead of looping through the array and console.log each element you can simply use the spread operator to print out the array: console.log(...arr) // 1 2 3 4 5.

Example:

But the spread operator can do much more than just that! Here are some other tricks that you can use it for:

1. A better way to use the array’s push() method

We all know that the push() method supports passing multiple indeterminate parameters.

In this example, we’re using the spread operator to spread out the elements of the array [ 'JavaScript', 'NodeJs' ] and use the spreaded out elements as arguments to the push method, which allows us to add multiple elements to the arr in one line instead of having to use push multiple times.

2. Copy a new array (shallow and deep clone)

Copying an array is one of the most convenient functions of the spread operator, but it’s worth noting that the spread operator only copies the array itself, not the elements. So if the original array contains objects, any changes made to the copy will also affect the original array as they refer to the same objects.

If you need to make a true copy of the array, including the objects inside it, you can use a deep copy function such as JSON.parse(JSON.stringify(originalArray)), which can create a deep copy of the original array.

It’s important to note that JSON.parse(JSON.stringify)) creates a deep copy, but it only works for JSON-compliant data and might not be the best option in terms of performance if you’re working with large arrays. It’s also worth mentioning that the JSON.parse(JSON.stringify(originalArray)) method will not work if originalArray has a function, Symbol and undefined value

It’s also possible to use a library like Lodash or Ramda that have a cloneDeep function which can create a deep copy of an array or an object while also preserving the non JSON data type.

3. Removing duplicate values from the array

Arrays of duplicate values can be removed through the set data structure and the spread operator.

4. Connect multiple arrays

Yes, we can use the spread operator to chain multiple arrays to get brand new data.

5. Convert NodeList to a real array

The spread operator can be used to convert a NodeList, which is a list of DOM elements, into a real array.

6. Destructuring

The spread operator is often used to destructure arrays and objects, check it out!

Destructure array:

Destructure object:

7. Convert string to array

Isn’t it amazing that a string can be turned into an array like this?

Conclusion

The spread operator (...) is a powerful tool that can simplify your code and make it more efficient. It allows you to expand the elements of an iterable object, such as an array, set, map, or object. It can be used for tasks like merging arrays, copying arrays, removing duplicates, destructure arrays and objects, and converting NodeList or string to array.

However, it is important to note that it creates a shallow copy, meaning that any changes made to the copied array will affect the original. Therefore, when necessary, you should use other methods to create a deep copy such as JSON.parse(JSON.stringify(originalArray)) or library like lodash or Ramda.

And Finally

As always, I hope you enjoyed this article and learned something new.
Thank you and see you in the next articles!

If you liked this article, please give me a like and subscribe to support me. Thank you.

Ref

• https://tuan200tokyo.blogspot.com/2023/01/blog108-7-es6-spread-operator-tricks.html