6 Great Uses of the Spread Operator

Thanks to ES6 and the likes of Babel, writing JavaScript has become incredibly dynamic, from new language syntax to custom parsing like JSX.  I’ve become a big fan of the spread operator, three dots that may change the way you complete tasks within JavaScript.  The following is a listing of my favorite uses of the spread operator within JavaScript!

Calling Functions without Apply

To this point we’ve called Function.prototype.apply, passing an array of arguments, to call a function with a given set of parameters held by an array:

function doStuff (x, y, z) { }
var args = [0, 1, 2]; // Call the function, passing args
doStuff.apply(null, args);

With the spread operator we can avoid apply all together and simply call the function with the spread operator before the array:

doStuff(...args);

The code is shorter, cleaner, and no need to use a useless null!

Combine Arrays

There have always been a variety of ways to combine arrays, but the spread operator gives use a new method for combining arrays:

arr1.push(...arr2) // Adds arr2 items to end of array
arr1.unshift(...arr2) //Adds arr2 items to beginning of array

If you’d like to combine two arrays and place elements at any point within the array, you can do as follows:

var parts = ['two', 'three'];
var lyrics = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]

Shorter syntax than other methods while adding positional control!

Copying Arrays

Getting a copy of an array is a frequent tasks, something  we’ve used Array.prototype.slice to do in the past, but we can now use the spread operator to get a copy of an array:

var arr = [1,2,3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4)

Remember: objects within the array are still by reference, so not everything gets “copied”, per se.

Convert arguments or NodeList to Array

Much like copying arrays, we’ve used Array.Prototype.slice to convert NodeList and arguments objects and to true arrays, but now we can use the spread operator to complete that task:

[...document.querySelectorAll('div')]

You can even get the arguments as an array from within the signature:

var myFn(...args)

Don’t forget you can also do this with Array.from!

Using Math Functions

Of course the spread operator “spreads” an array into different arguments, so any function where spread is used as the argument can be used by functions that can accept any number of arguments.

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

The Math object’s set of functions are a perfect example of the spread operator as the only argument to a function.

Destructuring Fun

Destructing is a fun practice that I’m using a ton of on my React projects, as well as other Node.js apps.  You can use destructuring and the spread operator together to extract the information into variables as you’d like them:

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

The remaining properties are assigned to the variable after the spread operator!

ES6 has not only made JavaScript more efficient but also more fun.  Modern browser all support the new ES6 syntax so if you haven’t taken the time to play around, you definitely should.  If you prefer to experiment regardless of environment, be sure to check out my post Getting Started with ES6.  In any case, the spread operator is a useful feature in JavaScript that you should be aware of!

Related Post

Rojenx is a leading concept artist who work appears in games and publications

Check out his personal gallery here

In other news …