Spread Operator In Javascript

Introduction

The spread operator is the new feature in the ES6 specification of javascript. It is one of the most useful operators. To expand iterable such as arrays or strings into the list of arguments we use spread operator syntax. The syntax is three dots (...). Object expressions are also expanded using this operator where key-value are expected such as object literals. It is amazing to use where we expect variables, multiple elements, arguments, etc. 

Now let us see different scenarios where spread operator eases our job in a perfect way. 

1. To expand the array into different elements and a string into a list of individual characters, we can use the spread operator as follows:

var name = "Aanchal";
console.log(name);
console.log(...name);
var arr = ["Ram", "Ravi", "Savita"];
console.log(arr);
console.log(...arr);

We will get the below output as follows:

Aanchal
A a n c h a l
["Ram", "Ravi", "Savita"]
Ram Ravi Savita

2. Copying and concatenation of the array and objects work best with the spread operator

It is very convenient to use the spread operator while copying an array into another.
If we don't use spread operator while copying, then any manipulation in the new array affects the previous array as well. Let us see an example:

var arr = ["Ram", "Ravi", "Savita"];
var arrNew = arr;
 arrNew.push("Aanchal");
 console.log(arr);
 console.log(arrNew);

We will get the below output as follows:

["Ram", "Ravi", "Savita", "Aanchal"]
["Ram", "Ravi", "Savita", "Aanchal"] 

The spread operator is the solution in the above case.

var arr = ["Ram", "Ravi", "Savita"];
var arrNew = [...arr];
 arrNew.push("Aanchal");
 console.log(arr);
 console.log(arrNew);

The old array will not get modified when we use the spread operator to copy an array. See the output below.

["Ram", "Ravi", "Savita"] 
["Ram", "Ravi", "Savita", "Aanchal"] 

We can directly copy an array into a new array. At the same time, we can add new items in the new array using the spread operator. We need not use push and the concat methods explicitly. The spread operator is a shorter syntax.

var arr = ["Ram", "Ravi", "Savita"];
var arrNew = ["Aanchal", ...arr, "Param", "Vinayak"];
console.log(arrNew); // ["Aanchal", "Ram", "Ravi", "Savita", "Param", "Vinayak"];

Now we will see how to copy an object into another object. The same use case works here. Any modification in the new objects will not affect the previous one using the spread operator.

var obj = { name: "Aanchal", rollNo: 11}
var objNew = {...obj}
objNew.section = "A";
console.log(objNew);  { "name": "Aanchal", "rollNo": 11, "section": "A" }
console.log(obj);     { "name": "Aanchal", "rollNo": 11 }

If two objects have the same properties, then the later(latest one) object property is assigned.

var obj = { name: "Aanchal", rollNo: 11};
var objNew = {  ...obj, name: "Raj", section: "A"}
console.log(objNew); // {  "name": "Raj", "rollNo": 11, "section": "A" }

In the above example, the name property is there in both objects. So the latest property name: "Raj" is assigned to the final copied object.
Now we will see one example of how to concat different arrays using spread operators. Short-hand syntax to combine two arrays and pushing new items at the same time.

var arr = [1, 2, 3];
var arr1 = ['a', 'b', 'c'];
var arr2 = arr.concat(...arr1);
arr2.push(7);
console.log(arr2); // [ 1, 2, 3, "a", "b", "c", 7 ]

var arr = [1, 2, 3];
var arr1 = ['a', 'b', 'c'];
var arr2 = ["Ram", ...arr, ...arr1, 7, "Anish"];
console.log(arr2); // [ "Ram", 1, 2, 3, "a", "b", "c", 7 ]

3. Suppose we have a nested array inside an array. Now to convert it into a single array we can use spread operator.

var arr = [1, 2, 3];
var arr2 = ["a", "b", arr, "c"];
console.log(arr2); // ["a", "b", [1, 2, 3], "c"]

If we use spread operator while copying the arr array into arr2. It will expand all the elements of arr into single elements and then insert them into a new array.

var arr = [1, 2, 3];
var arr2 = ["a", "b", ...arr, "c"]; // Use spread operator while copying or inserting
console.log(arr2); // ["a", "b", 1, 2, 3, "c"]

4. For using Math functions on the array, we can use the spread operator to avoid getting NaN as output.

Math in-built functions such as Math.max(), Math.min() expects list of arguments. If we pass an array as the argument, it gives us the NaN shown below.

var arr = [1, 2, 3];
var a = Math.min(arr);
console.log(a); // Output NaN

Now we will use the spread operator and see the output.

var arr = [1, 20 , 3, -1, 0 , -10];
var a = Math.min(...arr);
var b = Math.max(...arr);
console.log(a); // Output -10
console.log(b); // Output 20

5. Replace apply() method with spread operator when we have to pass a list of arguments to a function.

We have to use apply() method where we have to pass multiple arguments into a function as follows.

function add(x, y, z) { 
  let result =  x + y + z;
  return result;
}
var arr = [2, 4, 5];
var res = add.apply(null, arr);
console.log(res); // output 11

We can write this code using the spread operator which is much cleaner and convenient to use.

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

var arr = [2, 4, 5];
var a = add(...arr);
console.log(a); // output 11

Comments