Spread Love !!! Spread Peace !!! with (…Spread) Operator in JavaScript
With greater power comes even greater responsibilities
Over the last few years, there has been a massive transition of programmers who switched to JavaScript from other programming languages and the best part is JavaScript did not disappoint and kept on evolving.
JavaScript has massively improved its syntax and functionality with additional features over the last few years. With ES6, JavaScript introduced a bunch of features and one of them is the Spread Operator aka … Operator.
Confused with the three dots ??? Yes that’s what Spread Operator looks like
Let’s take a look at what Spread Operator does.
MDN Definition:
Spread syntax (
...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.
Syntax:
Its syntax is pretty straight forward just add three dots
const numbers = [1, 2, 3];
console.log(...numbers);OUTPUT: 1 2 3
Spread Operator can be used for three different cases:
- Function Calls
myFunction(...iterableObj); 2. Array Literals
[...iterableObj, '4', 'five', 6];3. Object Literals
let objClone = { ...obj };Spread in Function Calls
Spread Operator can be used to pass iterable element as an argument to a function and ‘expand/spread’ each item as its own argument rather than having to pass each argument individually.
Example 1:
If we pass an entire array to the function Math.min() without using (…)Spread Operator it will return as NaN.
var array = [23,45,67,80,90,95];
console.log(Math.min(array));OUTPUT:NaN
But if we pass an entire array to the function used in above example using (…)Spread Operator it will expand the array passing each element as an argument and will return the minimum value in an array.
var array = [23,45,67,80,90,95];
console.log(Math.min(...array));
//Equivalent to Math.min(23,45,67,80,90,95)OUTPUT:23
Example 2:
With (…)Spread Operator, an array can be easily and directly passed as an argument in new Operator while calling a constructor.
let dateFields = [1970, 0, 1]; // 1 Jan 1970
let d = new Date(...dateFields);
console.log(d);OUTPUT:Thu Jan 01 1970 00:00:00 GMT-0500 (Eastern Standard Time)
Spread in Array Literals
With the introduction of (…)Spread Operator we can do powerful operations in an array without feeling the need of push(), splice(), concat(), shift() and many more.
Example 1:Copy an Array
Let’s copy an array with the help of (…) Operator
var arr1 = ["Apples","Oranges","Mango"];
var arr2 = [...arr1];
arr2.push("Strawberry");
console.log(arr2);
//arr2 -> ["Apples","Oranges","Mango","Strawberry"]
//arr1 remains the sameOUTPUT: ["Apples", "Oranges", "Mango", "Strawberry"]
If you would have tried to copy arr1 simply by assigning it to arr2 like this
var arr2 = arr1;and then added any element to arr2. It would have added the same element in arr1 as well. Since arrays in JavaScript are assigned by reference. But with Spread Operator the element is only added to the copied array and the original array remains unaffected.
Example 2:Concat an Array
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; //same as arr1 = arr1.concat(arr2)
console.log(arr1);OUTPUT: [0, 1, 2, 3, 4, 5]
Spread in Object Literals
With (…)Spread Operator its possible to merge objects. The operations are very similar to that as we did in an array.
Example 1: Clone an Object
let obj = { foo: 'bar', x: 42 };let clonedObj = { ...obj };
console.log(clonedObj);OUTPUT: {foo: "bar", x: 42}
Example 2: Merge Objects
let obj1 = { fname: 'John', age: 42 };
let obj2 = { lname: 'Doe', weight: 70};let mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj);OUTPUT : {fname: "John", age: 42, lname: "Doe", weight: 70}
Conclusion
Using of (…)Spread Operator does help to make your code more readable and also it reduces redundant operations hence making your code short and crisp.
Thanks, for reading !!!
