JavaScript Spread Operator
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);
2. For Array
var array = [...iterableObj, 'abc', 'efg'];
3. For Object
var cloneObj = { ...obj };
Contents
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);
3000
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);
72 120
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);
Max: 35 Min: 20
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);
Wed Oct 30 2019 00:00:00 GMT+0530 (India Standard Time) Mon Nov 25 2019 08:25:30 GMT+0530 (India Standard Time)
Spread Operator for Array
Example-1: Copy Arrayvar array1 = ['Ram', 'Shyam', 'Krishna']; var array2 = [...array1]; console.log(array2);
[ "Ram", "Shyam", "Krishna" ]
var array1 = ['Ram', 'Shyam', 'Krishna'];
var array2 = [...array1];
array2.push('Mahesh');
console.log(array2);
console.log(array1);
[ "Ram", "Shyam", "Krishna", "Mahesh" ] [ "Ram", "Shyam", "Krishna" ]
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);
[ "Ram", "Shyam", "Krishna", "Narendra", "Amit", "Rajnath" ] [ 10, 20, 30, 40, 50, 60 ]
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);
[ "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 ofObject.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);
{ id: 101, name: "Mahesh", country: "India" }
var obj1 = {id: 101, name: 'Krishna', country: 'India' };
var obj2 = {id: 101, name: 'Mahesh', age: 25 };
var mergeObj = {...obj1, ...obj2};
console.log(mergeObj);
{ 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);
[ "A", "B", "C", "D", "E", "F", "G" ] [ "a", "1", "1", "b", "c", "2", "2", "d", "3" ]
