JavaScript Spread Operator

The Spread operator (represented as three dots or …) is used on iterables like array and string, or properties of Objects. to expand wherever zero or more elements are required top be copied or assigned. Its primary use case is with arrays, especially when expecting multiple values. The syntax of the Spread operator is the same as the Rest parameter but it works opposite of it.

1. Adding Multiple Elements Using Spread Operator

Even though we get the content on one array inside the other one, actually it is an array inside another array which is definitely what we didn’t want. If we want the content to be inside a single array we can make use of the spread operator. 

// expand using spread operator

let a = [10, 20];
let b = [...a, 30, 40];

console.log(a); 

[ 10, 20 ]

We can insert at the beginning and both begin and end together also

// expand using spread operator

let a = [10, 20];
let b = [30, 40, ...a, 50, 60];

console.log(a); 

[ 10, 20 ]

2. Find Min / Max using Spread Operator

Math object method won’t work and will return NaN. When …arr is used in the function call, it “expands” an iterable object arr into the list of arguments In order to avoid this NaN output, we make use of a spread operator. we make use of a spread operator In order to avoid this NaN

// Min in an array using Math.min()
let a = [1,2,3,-1];
console.log(Math.min(a)); //NaN

// Now using spread 
console.log(Math.min(...a)); 

NaN
-1

3. Passing Array Elements as Function Parameters

function add(x, y, z) {
  return x + y + z;
}

let a = [10, 20, 30];
console.log(add(...a));

60

4. Copying Array using Spread

We are copying all the elements of the given array to the another new array by the use of the spread operator.

const a = [1, 2, 3];
const b = [...a]; 
console.log(b); 

// Please note that in JavaScript, doing
// b = a does not create a clone. It only creates
// one more reference. You may try uncommening the
// below code
//  const c = [1, 2, 3];
//  const d = c;
//  d.push(4);
//  console.log(c); // Prints [1, 2, 3, 4]

[ 1, 2, 3 ]

Please refer Clone an array for different methods of copying an array in JS

5. Concatenate Arrays using Spread Operator

The spread operator can be used to concatenate more than one array.

// Spread operator for array concatenation
let a = [1, 2, 3];
let b = [4, 5];

a = [...a, ...b];
console.log(a);

[ 1, 2, 3, 4, 5 ]

Note: Though we can achieve the same result as the concat method, it is not recommended to use the spread in this particular case, as for a large data set it will work slower when compared to the native concat() method.

6. Working of Objects with Spread Operator

ES6 has added spread property to object literals in javascript. The spread operator (…) with objects is used to create copies of existing objects with new or updated values or to make a copy of an object with more properties. Let’s take an example of how to use the spread operator on an object, 

const usr = {
    name: 'Jen',
    age: 22
};

const cloneUsr = { ...usr };
console.log(cloneUsr);

{ name: 'Jen', age: 22 }

Here we are spreading the usr object. All key-value pairs of the usr object are copied into the cloneUsr object.

Let’s look at another example of merging two objects using the spread operator.

const usr1 = {
    name: 'Jen',
    age: 22,
};

const usr2 = {
    name: "Andrew",
    location: "Philadelphia"
};

const mergedUsers = { ...usr1, ...usr2 };
console.log(mergedUsers);

{ name: 'Andrew', age: 22, location: 'Philadelphia' }

The mergedUsers is a copy of usr1 and usr2. Actually, every enumerable property on the objects will be copied to the mergedUsers object. The spread operator is just a shorthand for the Object.assign() method but, there are some differences between the two.

Below is an example of adding properties to an object using spread operator.

const o1 = { a: 1, b: 2 };
const o2 = { ...o1, b: 3, c: 4 };
console.log(o2); 

{ a: 1, b: 3, c: 4 }

We have a complete list of Javascript Operators, to check those please go through the Javascript Operators Complete Reference article.