Utilities of spread operator in JavaScript

Spread operator is one of the coolest features introduced as part of the ES2015 release, we will look at some its useful applications.

Have you ever observed when you spread some butter on your toast, how it leaves a mark. Similarly, JavaScript Spread operator is represented by three dots before the variable. It is an operator just like any other mathematical operator like +, -, %. The spread operator only works on reference data types like objects, arrays, maps, sets, and so on. Look at the following snippets that can help you understand the implementation better:

Syntax

For arrays:

const numArray = [1,2,3,4];

Imagine spreading the array means removing square brackets.

Visualize ...numArray as => 1,2,3,4

For objects:

const profile = { name: ‘techsith’ , age: 30 };

Imagine spreading the object means removing curly brackets.

Visualize ...profile as => name: ‘techsith’ , age: 30

Now that you know how the operator is declared, let’s look at some cool applications of the spread operator.

Create a shallow copy of an array

Let’s say you want to create a copy (clone) of an array such that they would have the same content but will be two separate arrays.

const numArray = [1,2,3,4];

Spreading numArray would get you following. Remember, spreading also creates a clone.

...numArray     // 1,2,3,4

Adding square brackets around the spread operator gets you an array back.

const newArray = [...numArray]  // [1,2,3,4]

Here, newArray is a shallow copy of the numArray. Shallow copy means that it only spreads one level deep. If your elements have children, those elements would not be cloned. Hence, you will have reference to the original object. In the example below, updating the name property of the cloned profile also updates the original profile. It is because the name is one level deep.

const profiles = [{
    name: 'techsith',
    age: 30
  },
  {
    name: 'john',
    age: 20
  }];
const clonedProfiles = [...profiles];
clonedProfiles[0].name = 'peter';
console.log(profiles[0].name); //peter.

Merging arrays

Merging two or more arrays are now super easy using spread operator.

const array1 = [1,2,3,4];
const array2 = [5,6,7];

Visualize spreading both arrays

(Visualize)
...array1  //1,2,3,4
...array2  //5,6,7

now, visualize merging two spread operators. It will result into the following:

(Visualize)
...array1, ...array2  // 1,2,3,4,5,6,7

finally, put the square bracket around it and voila, you have merged array.

const mergedArray = [...array1, ...array2]  // [1,2,3,4,5,6,7]

Merging Objects

Merging object is tad different than merging arrays. Because, objects don’t allow duplicate keys. Let’s understand the difference through an example: You have two profiles of a same person. The name of the person in both the profiles is same. However, age is different and the second profile has an additional property called website.

const profile1 = {
  name: 'techsith',
  age: 30
};
const profile2 = {
  name: 'techsith',
  age: 40,
  website: 'techsith.com'
};

Let’s spread them and visualize:

(Visualize)
...profile1 // name: 'techsith', age: 30
...profile2 // name: 'techsith', age: 40, website: 'techsith.com'

Let’s merge the spread:

(Visualize)
...profile1, ...profile2 
// name: 'techsith', age: 30 , name: 'techsith', age: 40, site: 'techsith.com'

As you can see, there’s a problem with unique keys. Technically, merged profiles should have unique keys. However, here we have duplicate keys. Hence, the key that is defined later overrides the first one. Age 40 would override Age 30. Name has duplicate values, so it will consider the second or the last value.

(Visualize)
...profile1, ...profile2
// name: 'techsith', age: 40, site: 'techsith.com'

Now, let’s put curly brackets around, so we convert spread to an object.

const newProfile = { ...profile1, ...profile2 }  
/* 
{
  name: 'techsith',
  age: 40,
  site: 'techsith.com'
}
*/

Rest parameters

There are cases where you don’t want to provide fixed number or arguments to a functions. For example, I have a function that adds all the arguments and returns the sum.

let addTwo = (a, b) => a + b;
let addThree = (a, b, c) => a + b + c;

However, I want to keep this open ended and the function should take n numbers of argument. Here, we can use a spread operator.

let add = (...n) => n.reduce((total, i) => total + i);
console.log(add(1,2,3)) // 6
console.log(add(1,2,3,4)) // 10

The arguments are spread using a spread operator …n, the use of spread operator here is called Rest parameters. Inside the function, you can use n as an array.

I am sure there are more utilities of spread operator than what i have mentioned here. Do let me know if you know them.

:)