Spread syntax (three dots) in JavaScript

Spread syntax which is used by typing three dots (…) in JavaScript. It allows an array expression or string or anything which can be iterating to be expanded in places where zero or more arguments for function calls or elements for array are expected. It can also be used for an object expression to be expanded in places where zero or more key-value pairs for object are expected.

Spread syntax can be used for:

• Array literals or string
• Function Calls
• Object literals (ECMAScript 2018)

How to use Spread syntax in Array literals?

Let consider below code in which we have two arrays.

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

Now here we want to merge values of “arr1” into the “arr2” after value “3” in “arr2”. To achieve this we used to follow below traditional way.

var arr1 = [4,5]
var arr2 = [1,2,3,6,7]
arr2.splice.apply(arr2, [3, 0].concat(arr1));
console.log(arr2);

//Output: [1, 2, 3, 4, 5, 6, 7]

Here Spread of ECMAScript 2015 comes in the picture which simplifies the above code and allow us to achieve above output very easily. Consider below code:

var arr1 = [4,5]
var arr2 = [1,2,3,...arr1,6,7]
console.log(arr2);

//Output: [1, 2, 3, 4, 5, 6, 7]

Consider below experiment for easy array operations with Spread (three dots):

//Copying array
var arr = [1, 2, 3];
var arr2 = [...arr];

//Concatenate array
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];

How to use Spread syntax in Function?

In function if you want to pass an array as an argument you have to use Function.Prototype.apply.

Let’s consider below code:

function addition(num1,num2) {
  console.log(num1 + num2);
}
addition.apply(null,[10,20]);

//Output: 30

Using Spread above can be achieved with

function addition(num1,num2) {
  console.log(num1 + num2);
}
addition(...[10,20]);

//Output: 30

Any argument in the function can be passed using spread

function addition(num1,num2, num3, num4) {
  console.log(num1 + num2 + num3 + num4);
}
addition(5,...[10,20],5);
//Output: 40

Using spread we can pass an array to a constructor where we can’t pass simple array to call constructor with new

var date = new Date(...[2018, 03, 18]);

How to use Spread syntax with object?

Before using Spread syntax with objects make sure your browser supports ECMAScript 2018 features.

If you are doing Shallow cloning or merging of the objects Spread syntax can be useful

var res1 = { name: 'yatendra', marks1: 35 };
var res2 = { name: 'yatendra', marks2: 38 };

var cloneObj = { ...res1 };
//Output: { name: "yatendra", marks1: 35 }


var mergeObj = { ...res1, ...res2 };

//Output: { name: 'yatendra', marks1: 35, marks2: 38 }

Summary

As we have discussed Spread is used only with iterable, so if you will try below code it will throw an exception

var obj = {'key': 'value'};
var arr = [...obj]; 
//Output: TypeError: obj is not iterable

Interested in JavaScript? Click here to read more JavaScript articles in Code4Developers

Yatendrasinh Joddha

I have healthy knowledge and experience in Azure, O365 and ASP.Net with c#, MVC, WebApi along with client-side frameworks and libraries like JavaScript, JQuery, KnockoutJs, AngularJs, Angular, ReactJs, NodeJs