JavaScript Spread Operator

By Arvind Rai, November 01, 2019

JavaScript Spread operator is three dot (...) that is used with an iterable such as an array expression or string. Spread Operator is used with function, array and object. Find the Spread syntax.
1. For Function

myFunction(...iterableObj);

Spread operator expands an iterable in places where zero or more arguments are expected in a function.
2. For Array

var array = [...iterableObj, 'abc', 'efg'];

Spread operator expands an iterable in an array.
3. For Object

var cloneObj = { ...obj };

Spread operator expands an object expression for object where zero or more key-value pairs are expected.

Spread Operator for Function
Spread Operator for Array
Spread Operator for Object
Spread Operator with String
Reference

Spread Operator for Function

Spread operator will spread the array to provide value to function arguments.
Example-1:

function multiplyNum(x1, x2, x3) {
  return x1 * x2 * x3;
} 

var array1 = [10, 15, 20];
var result = multiplyNum(...array1);
console.log(result);

Output

Example-2:

function addNum(x1, x2, x3, x4, x5) {
  return x1 + x2 + x3 + x4 + x5;
} 

var array1 = [5, 10, 12, 20, 25];
var result = addNum(...array1);
console.log(result);

var array2 = [15, 10];
result = addNum(50, 25, ...array2, 20);
console.log(result);

Output

72
120

Example-3: For Math

var array1 = [20, 30, 35, 25];
var result = Math.max(...array1);
console.log("Max: ", result);

var array2 = [25, 20, 35, 30];
result = Math.min(...array2);
console.log("Min: ", result);

Output

Max:  35
Min:  20

Example-4: For Date

var array1 = [2019, 9, 30];
//new Date(yyyy, MM, dd)
var date1 = new Date(...array1);
console.log(date1);

var array2 = [2019, 10, 25, 8, 25, 30];
//new Date(yyyy, MM, dd, hh, mm, ss)
var date2 = new Date(...array2);
console.log(date2);

Output

Wed Oct 30 2019 00:00:00 GMT+0530 (India Standard Time)
Mon Nov 25 2019 08:25:30 GMT+0530 (India Standard Time)

Find the print screen of browser console.

Spread Operator for Array

Example-1: Copy Array

var array1 = ['Ram', 'Shyam', 'Krishna'];
var array2 = [...array1];
console.log(array2);

Output

[ "Ram", "Shyam", "Krishna" ]

Changes in output array will not impact source array for one dimensional array.

var array1 = ['Ram', 'Shyam', 'Krishna'];
var array2 = [...array1];
array2.push('Mahesh');
console.log(array2);
console.log(array1);

Output

[ "Ram", "Shyam", "Krishna", "Mahesh" ]
[ "Ram", "Shyam", "Krishna" ]

Example-2: Concatenating Arrays. We can use Spread operator to concatenate arrays in place of JavaScript concat() method.

var array1 = ['Ram', 'Shyam', 'Krishna'];
var array2 = ['Narendra', 'Amit', 'Rajnath'];
var result1 = [...array1, ...array2];
console.log(result1);

var numArr1 = [10, 20, 30];
var numArr2 = [40, 50, 60];
var result2 = [...numArr1, ...numArr2];
console.log(result2);

Output

[ "Ram", "Shyam", "Krishna", "Narendra", "Amit", "Rajnath" ]
[ 10, 20, 30, 40, 50, 60 ]

Example-3: Concatenating Values to Arrays

var array1 = ['Radha', 'Seeta', 'Lakshmi'];
var array2 = ['Durga', 'Parvati'];
var result1 = ["Saraswati", ...array1, "Gauri", ...array2];
console.log(result1);

var numArr1 = [11, 12, 13];
var numArr2 = [15, 16, 17];
var result2 = [10, ...numArr1, 14, ...numArr2];
console.log(result2);

Output

[ "Saraswati", "Radha", "Seeta", "Lakshmi", "Gauri", "Durga", "Parvati" ]
[ 10, 11, 12, 13, 14, 15, 16, 17 ]

Spread Operator for Object

Spread operator copies enumerable properties from a provided object onto a new object. We can use Spread Operator in place of Object.assign() for shallow-cloning or merging of objects.
Example-1: Cloning object

var obj = {id: 101, name: 'Mahesh', country: 'India' };
var cloneObj = {...obj};
console.log(cloneObj);

Output

{ id: 101, name: "Mahesh", country: "India" }

Example-2: Merging objects

var obj1 = {id: 101, name: 'Krishna', country: 'India' };
var obj2 = {id: 101, name: 'Mahesh', age: 25 };
var mergeObj = {...obj1, ...obj2};
console.log(mergeObj);

Output

{ id: 101, name: "Mahesh", country: "India", age: 25 }

Spread Operator with String

var str1 = "ABCDEFG";
var array1 = [...str1];
console.log(array1);

var str2 = "a11bc22d3";
var array2 = [...str2];
console.log(array2);

Output

[ "A", "B", "C", "D", "E", "F", "G" ]
[ "a", "1", "1", "b", "c", "2", "2", "d", "3" ]

Reference

JavaScript Spread syntax

POSTED BY

ARVIND RAI

LEARN MORE

JAVA SPRING BOOT ANGULAR Angular Material NGRX JAVASCRIPT ANDROID THYMELEAF FREEMARKER Hibernate Struts 2 Testing MAVEN APACHE API JACKSON API JUNIT 5

JavaScript Spread Operator

Contents

Spread Operator for Function

Spread Operator for Array

Spread Operator for Object

Spread Operator with String

Reference

About Us

Utility