Spread operator in JavaScript- How and when to use it?

Hey readers, in this article we will be discussing the spread operator in JavaScript in a step-wise, efficient manner. If you are a beginner and want to learn JavaScript then do check out the course on Codedamn.

An iterable can expand in areas where 0+ arguments are expected using the spread operator. It’s most commonly used in variable arrays where more than one value is required. It provides us with the ability to get a list of parameters from an array. The Spread operator has the same syntax as the Rest argument, but it has the exact opposite effect.

Syntax of spread operator:

var variablename1 = […value]; 

The (…) operator in the above syntax is a spread operator that will target all values in a certain variable. When the character (…) appears in a function call or similar context, it is referred to as a spread operator. When we wish to extend, copy, or concatenate with a math object, we can utilize the spread operator. Let’s take a look at each one separately:

Concat()

The JavaScript concat() technique aids in the concatenation of two or more strings (String concat()) or the merging of two or more arrays. This function returns a new array instead of changing the existing arrays in the case of arrays.

let arr = [1,2,3]; // normal array concat() method
let arr2 = [4,5];
arr = arr.concat(arr2);
console.log(arr); // [ 1, 2, 3, 4, 5 ]

With the help of the spread operator, we can achieve the same result; the code will look like this:

let arr = [1,2,3]; // spread operator doing the concat job
let arr2 = [4,5];
arr = [...arr,...arr2];
console.log(arr); // [ 1, 2, 3, 4, 5 ]

Though we can get the same effect, it is not suggested to utilize the spread in this scenario because it will function slower than the native concat() technique for a large data set.

Copy (like splice method)

We can perform something like this to replicate the content of an array to another:

let arr = ['a','b','c']; // copying without the spread operator
let arr2 = arr;
console.log(arr2); // [ 'a', 'b', 'c' ]

The above code works because we can copy the contents of one array to another, but it’s completely different underneath the hood since when we change a new array, it also mutates the old array (the one which we copied). Look at the code below:

let arr = ['a','b','c']; // changed the original array
let arr2 = arr;
arr2.push('d');
console.log(arr2);
console.log(arr); // even affected the original array(arr)

Expand

We perform something like this if we want to expand one array into another:

let arr = ['a','b']; // normally used expand method
let arr2 = [arr,'c','d'];
console.log(arr2); // [ [ 'a', 'b' ], 'c', 'd' ]

Even if we obtain the content of one array inside the other, it is essentially an array inside an array, which is clearly not what we wanted. The spread operator can be used to keep the content contained within a single array.

let arr = ['a','b']; // expand using the spread operator
let arr2 = [...arr,'c','d'];
console.log(arr2); // [ 'a', 'b', 'c', 'd' ]

Math

The Math object in JavaScript includes various attributes that we may utilize to accomplish our goals, such as getting the least from a list of integers, finding the maximum, and so on. Consider the following example: If we want to determine the minimum from a list of numbers, we’ll write:

console.log(Math.min(1,2,3,-1)); //-1

When (…arr) is used in a function call, an iterable object arr is “expanded” into the list of arguments.

To avoid this NaN output, we utilize the spread operator, such as:

let arr = [1,2,3,-1]; // with spread
console.log(Math.min(...arr)); //-1

The spread operator uses objects as an example

Object literals in JavaScript now have a spread attribute thanks to ES6. When working with objects, the spread operator (…) is used to make copies of existing objects with new or updated values, or to construct a copy of an object with more properties. Consider the following example of how to use the spread operator to an object.

const user1 = {
name: 'Jenny',
age: 23
};
const clonedUser = { ...user1 };
console.log(clonedUser);

Conclusion

This was about spread operator in JavaScript using HTML, if you want to learn more about JavaScript, do check out the article and course on Codedamn of JavaScript along with the course. Hope you liked this, if you have any queries or suggestions, do let us know in the comments. 

If you are interested in learning JavaScript, do check out courses on codedamn with an in-built environment playground to learn and practice code. Join the community of codedamn and do check out other articles related to programming and development on codedamn and subscribe to our newsletter to never miss out on our new programs and updates.

If you have any queries or feedback do let us know in the comment section.