Spread operator in JavaScript

Spread operator allows arrays or string to expand. Spread operator mostly used in passing arguments to the function ( while making a function call ) and with arrays.

Spread operator in a function call

Let us have a look at how a spread operator works in a function call.


function greetSomeone(greetings, fName, lName){
    console.log(greetings + ", My name is " + fName + " " + lName);
}

var greetArr = ["Hello","John", "Doe"];

greetSomeone(...greetArr);
//output: "Hello, My name is John Doe"

//without spread operator
greetSomeone(greetArr[0], greetArr[1], greetArr[2]);
//output: "Hello, My name is John Doe"

//OR
greetSomeone.apply(null, greetArr);
//output: "Hello, My name is John Doe"
                    

As you can see from the above code, you can use spread operator ... to spread ( expand ) the array when you call a function. Without the spread operator, you can use function.apply a function or you can manually pick every value from an array and pass to the function.

Let us have a look at more examples.


function sum(a, b, c, d, e, f){
    console.log(a + b + c + d + e + f);
}

var valArr = [1,2,3];

sum(2, ...valArr, 3, 4); //output: 15

sum(2, ...valArr, ...[3,4]); //output: 15

var str = "This is great";
sum(...str); //output: "This i"

var valArr2 = [1,2,3,4,5,6,7,8,9];
sum(...valArr2);
//output: 21

var birthDate = [1991, 8, 8];
var d = new Date(...birthDate);
                    

As you can see from the above examples,

  • Spread operator can be added between arguments. sum(2, ...valArr, 3, 4);
  • A spread operator can be directly applied to an array. sum(2, ...valArr, ...[3, 4]);
  • Spread operator can work with string. sum(...str);
  • If there are more values in an array then the arguments function was expecting, then other values of array will not be considered.

    i.e. valArr2 has 9 values but sum function is expecting only 6 arguments. So it will add only 1 to 6 values from valArr2. The last 3 values i.e. 7,8,9 will be ignored.

  • A Spread operator can also be used with a new operator. new Date(...birthDate)

Spread operator in an Array

You can use the spread operator to create a new array from an existing array, copy an array. Let us have a look at an example.


var arr1 = [1,2,3];

var arr2 = [...arr1];
console.log(arr2); //output: [1,2,3]
// arr1.slice() will also work.

arr2.push(4);
console.log(arr2); //output: [1,2,3,4]
console.log(arr1); //output: [1,2,3]

var arr3 = arr1;
console.log(arr3); //output: [1,2,3]
arr3.push(4);
console.log(arr3); //output: [1,2,3,4]
console.log(arr1); //output: [1,2,3,4]
                    

In the above code, we have used the spread operator to copy an array [...arr1]. Now you must be thinking that it can directly be done by var arr3 = arr1. That would also copy arr1 to arr3, right?
You are wrong. It does not copy it. = assignment operator just assign the reference where arr1 is stored ( actually arr1 is also a reference ). So when you make a change in arr3, it will also change arr1. So = does not create a new array.

So to copy an array you can use the spread operator or slice() method of an array ( we will see it in detail ).

Concatenate arrays with the spread operator

You can use the spread operator to concatenate arrays. Let us have a look at an example.


var arr1 = [1,2,3];
var arr2 = [4,5,6];

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

//traditionally concat() method is used. 
var arr1 = [1,2,3];
var arr2 = [4,5,6];

arr1 = arr1.concat(arr2);
console.log(arr1); // output: [1,2,3,4,5,6]
                    

In the above code, we have used the spread operator to concatenate two arrays and saved it into arr1. You can use concat method in array to do that.


var arr1 = [1,2,3];
var arr2 = [4,5,6];

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


var arr1 = [1,2,3];
var arr2 = [4,5,6];

Array.prototype.unshift.apply(arr1, arr2);
console.log(arr1); // output: [4,5,6,1,2,3]
                    

You also can insert array values at the beginning of another array.
Traditionally, unshift() method of array is used to insert value at the beginning of an array. unshift method does not create a new array. It changes arr1.

A spread operator in object

A spread operator in object literals was included in ECMAScript 6. By a spread operator, you can merge objects or copy properties of one object to a new object. Let us have a look at an example.


var obj1 = {
    prop1: "prop1",
    prop2: "prop2"
};

var obj2 = {
    ...obj1
};
console.log(obj2);
// output: { prop1: "prop1", prop2: "prop2"}

obj2.prop3 = "prop3";
console.log(obj1);
// output: { prop1: "prop1", prop2: "prop2"}
console.log(obj2);
// output: { prop1: "prop1", prop2: "prop2", prop3: "prop3"}

var obj3 = obj1;
console.log(obj1);
// output: { prop1: "prop1", prop2: "prop2"}
console.log(obj3);
// output: { prop1: "prop1", prop2: "prop2"}
obj3.prop3 = "prop3";
console.log(obj1);
// output: { prop1: "prop1", prop2: "prop2", prop3: "prop3"}
console.log(obj3);
// output: { prop1: "prop1", prop2: "prop2", prop3: "prop3"}
                    

In the above code, var obj2 = { ...obj1 } copies all the properties of obj1 to obj2. If you change obj2, it does not change obj1.
You see var obj3 = obj1; does not copy obj1 to obj3. It just assigns a reference to obj3. So if you change obj3, it will change obj1 and change in obj1 will change obj3.

Merge two objects with the spread operator

It is easy to merge two objects with the spread operator. Let us have a look at an example.


var obj1 = {
    prop1: "prop1",
    prop2: "prop2"
};

var obj2 = {
    prop3: "prop3",
    prop4: "prop4"
};

var obj3 = {
    ...obj1,
    ...obj2
}
console.log(obj3);
// output: { prop1: "prop1", prop2: "prop2", prop3: "prop3", prop4: "prop4"}

obj2 = {
    prop2: "prop2_new",
    prop3: "prop3",
    prop4: "prop4"
};

obj3 = {
    ...obj1,
    ...obj2
};
//check the output
                    

Conclusion

In this section, we learned about spread operator in JavaScript, Spread operator in a function call, Spread operator in Array and spread operator in an object.
In next section, you will learn about rest parameter in JavaScript..