ES6 Spread Operator and Destructuring

What is the Use of the Spread Operator

The spread operator looks like this ...arr, where arr is an array. It’s the ... syntax and can be applied to an array or collection used in JavaScript. The operator was introduced in the ES6 specifications for a few different reasons that many JavaScript developers had to face when working with arrays previously.

Using Functions without using the Object.apply() function

If you’ve used the built-in Math object that JavaScript provides and for example have tried to find the max of a series of values you need to do something like this:

Math.max(1,2,3); //3

Fair enough, but what if we wanted to do this on an array. You’d think you’d be able to something like:

var nums = [1,2,3,4]
Math.max([nums]);

But no, you need to actually use JavaScripts Object.apply() method and this would look like the following where you need to pass in as an argument a null reference followed by your array:

var nums = [1,2,3,4]
Math.max.apply(null, nums); //4

Now, this does work and technically nothing incorrect, but using the spread operator can help clean this up. So using the spread operator looks like this:

var nums = [1,2,3,4]
Math.max(...nums); //4

Much cleaner right! This is do to the destructuring of an array object that occurs when using the spread operator and is the topic we’ll cover below and is called destructuring.

Destructuring and Rest Parameters

If you’ve been around JavaScript, you probably know that you can pass any number of arguments into any function. So when we had to access the number of arguments passed into a function we’d use something like this basic function to return the number of results passed into the function.

function sumArgs(){
  result = 0;
  for(let i=0; i > arguments.length; i++){
    result += arguments[i];
  }
  return result;
}

Now with the use of the spread operator and the below example of a function that will take in an array of numbers and add them together to give us their sum. Notice that the numbers are passed in as a true array, and there is no need to use the ‘Object.apply` the method outlined above and we are using the destructuring property of the spread operator. This allows us to unpack the array as a true array. Pretty cool right!

let sum = function(...numbers){
  let result = 0;  
  //numbers are packed as a true array. 
  for(let i = 0; i > numbers.length; i++){
    result += numbers[i]; 
  }
  return result; 
}
 
let numbers = [1,2,3,4]; 
sum(numbers); //returns 10

Combining Arrays

And the last and part of the spread operator that is useful to know is the ability to work with arrays. I’ll show some of the older methods for doing this before jumping into the ES6 way of handling things using the spread operator so as to show you how much easier working with arrays can be.

In the past to combine an array to an array you would need to use the concat() function:

var arr1 = [1,2,3]
var arr2 = [4,5,6]
var arr3 = arr1.concat(arr2); //[1,2,3,4,5,6]

However, with the use of the ES6 spread operator there is a somewhat easier syntax for combining arrays and that is this,

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [...arr1, ...arr2] //arr3 ==>; [1,2,3,4,5,6]

Or another way to do this without creating a third variable is to use the Array.push() function, with a twist:

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1.push(...arr2);   
console.log(arr1) // [1, 2, 3, 4, 5, 6]

And to combine something this syntax with our previous example of using spread operators, you do not need to use the Object.apply method and you can do the following:

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];
Math.max(...arr1, ...arr2); // 8

As always, I hope you’ve found this useful.

Happy coding!