Home  >  JavaScript

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 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
3000 
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.
JavaScript Spread Operator

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
ARVIND RAI
FIND MORE TUTORILAS






©2019 concretepage.com | Privacy Policy | Contact Us