Spread Operator JavaScript

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. Antoine de Saint-Exupery

JavaScript is becoming more powerful every day (thanks to ES6 and Babel), new syntax and tools allow us to write concise code and the less code we have to write the less errors.

Today, we are going to discuss the spread syntax and how we can use it to write more concise and clean code. We will learn by working through some examples, discussing how it differs to using non ES6 JS.

Example 1 — Combining/Intersecting two arrays

The following code will combine two arrays, the first method is using concat and the second is using the spread syntax.

// combine two arrays using concat
const myArray1 = [1,2,3,4,5]
const myArray2 = [6,7,8,9,10];
const myArray3 = myArray1.concat(myArray2);
// combine two arrays using the spread syntax
const myArray4 = [1,2,3,4,5]
const myArray5 = [6,7,8,9,10];
const myArray6 = [...myArray4, ...myArray5];

In all honesty, there is not much of a difference here as we are just putting two arrays together but where things get interesting is when we want to insert an array in the middle of another array.

// combine two arrays using the spread syntax
const myArray1 = [4,5,6,7,8];
const myArray2 = [1,2,3,...myArray5, 9 ,10]
// outputs
// [1,2,3,4,5,6,7,8,9,10]

Doing this without the spread syntax would involve looping on the first array then on index 3 start looping on the second array and adding each value in, you can see just how easy it is with the spread syntax.

Also a quick note, making a new copy of an array is incredibly simple with the spread syntax

let firstArray = [1,2,3];
let secondArray = [...firstArray]

*** please note objects within an array won’t be copied and will still have the same reference so be careful!

Example 2 —Passing all values of an array into a function

So for this example we will look at how we can pass an array to a function and spread all the values.

So if we develop a function that will simply return the sum of the first 3 values of an array, how should we pass this array to the function?

// declare array
const myArray1 = [1,2,3,4,5];
// Non Spread
const sum = addFirst3ValuesOfArray(myArray1);
//sum is 6
function addFirst3ValuesOfArray(arr){
 let sum = 0;
 arr.forEach((val, index) => {
   if(index < 3){
     sum += val;
    }
  });
  
  return sum;
}
//Spread Syntax
const es6sum = es6AddFirst3ValuesOfArray(...myArray1);
// es6sum is 6
function es6AddFirst3ValuesOfArray(arg1, arg2, arg3){
  let sum = arg1 + arg2 + arg3;
  return sum
}

I believe using the spread operator here and accepting 3 arguments is much cleaner, admittedly this is a useless function but it is a good example of what happens when you pass an array with the spread operator to a function.

Example 3 — Spreading an Object

You can also use the spread operator on objects, this makes it very easy to make a copy of an object and not worry about object references and mutability which can lead to unexpected behaviour.

let myObj = {a : 1, b: 2, c: 3, d: 4};
let newObj = {...myObj};
newObj.a = 5;
// original object is not changed!!
console.log(myObj); // outputs {a : 1, b: 2, c:3, d: 4}

Example 4 — Combining two objects

For this section, I would like you to create two objects and use the spread syntax to combine them, if you have been understanding up to this point then you find this really easy.

Solution below:

********************************************************************************************************************************************************************************************************

let myObj = {a : 1, b: 2, c: 3, d: 4};
let otherObj  = {e : 5, f : 6, g : 7};
let objectsCombined = {...myObj, ...otherObj};

Again, we can see how the spread syntax makes some things very trivial.

Example 5 — Destructuring

So if you don’t see know what destructuring is, don’t worry, we look at exactly what it is first.

Destructuring allows us to extract values from objects. Let’s look at an example (I will use JSFiddle here as there is quite bit of code).

So now that we have an understanding of destructuring, we can see how we can use it with the spread syntax.

Using the spread operator, we were easily able to get all the properties after town and assign them to a single variable (restOfData).

Conclusion

Today we have seen nearly all of the uses of the spread operator and just how powerful it is.

I hope you learned something, if so please leave a clap.

Thank you.