Spread Operator or three dots(…) are used to clone or merge data from an array or object into new objects.

Here is a syntax

...[object|array]

This operator is applied to javascript objects with type iterable items

ES6 Spread Operator examples

Let’s see a multiple examples

Append two arrays into the new array

var array1 = ['one', 'two', 'three'];
var array2 = ['five', 'six', 'seven'];
var result = [...array1, ...array2];

console.log(result)

Output:

[ 'one', 'two', 'three', 'five', 'six', 'seven' ]

Another example is to copy the array of elements

 var array1 = ['one', 'two', 'three'];
 var result = ["five", ...array1,"six"];

 console.log(result)

 [ 'five', 'one', 'two', 'three', 'six' ]

Array Destructuring assignment example

You can also use the spread operator to destructuring into a variables

 var array1 = ['one', 'two', 'three'];
 var [first,...result] =array1

 console.log(first)
 console.log(result)

Output

one
[ 'two', 'three' ]

Merge Objects into a single object example

Javascript object contains keys and values, You can merge multiple objects into a single object.

It follows the following steps

  • if there is no matched property found, It copied to the result object
  • If matching property found, result object contains property from second, overrides the first object property

In the below example, the name contains two objects, it is overridden with the second object value.

const employee = {
  id: 1,
  name: 'john',
  salary: 1000
}

const department = {
  type: 'sales',
  deptid: 123,
  name: 'sales'
}

const result = {...employee, ...department}

console.log(result)

Output:

{ id: 1, name: 'sales', salary: 1000, type: 'sales', deptid: 123 }

String to array and object example

This is an example of a string that converted to an array of characters and objects

var welcome = "welcome";
var chars = [...welcome];

console.log(chars);
var chars1 = {...welcome};

console.log(chars1);

Output:

[
  'w', 'e', 'l',
  'c', 'o', 'm',
  'e'
]
{
  '0': 'w',
  '1': 'e',
  '2': 'l',
  '3': 'c',
  '4': 'o',
  '5': 'm',
  '6': 'e'
}

Deep Cloning an array

Copying an array can be done by assigning one array to an array as given below. In this only one array is created with two references array1 and array2.

If there are any changes in array1, It also affects array2.

this is also called shallow copy.

Here is an example

var array1 = ['one', 'two', 'three'];
var array2=array1
 console.log(array2)
array1.push("four")
 console.log(array2)
 console.log(array1)

Output:

[ 'one', 'two', 'three' ]
[ 'one', 'two', 'three', 'four' ]
[ 'one', 'two', 'three', 'four' ]

Similarly, you can also do copy and result array modification that does not change the original array.

this is also called deep copy.

var array1 = ['one', 'two', 'three'];
var result = [...array1];
console.log(result)
array1.push("four")
console.log(result)
console.log(array1)

used in functional parameters

Spread operators are used in function parameters to pass an array of objects.

It is also called REST Operator.

function add(...data) {
  return data.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(add(11,15));    //26
console.log(add(6,8,4,9));    //27
console.log(add(0,19));    //19
``