The Javascript spread operator permits an array or string, or other iterable, to be expanded in places with zero or more arguments (for function calls) or elements. The syntax for this is three periods (…) In this article, I will explain the use cases of the spread operator in JavaScript, so let’s jump right to it. Use Cases Adding the elements of an existing array into a new array let newarr = ["Red", "Yellow"];
let otherarr = ["Blue", ...newarr, "Green"] 
console.log(otherarr); // ["Blue", "Red", "Yellow", "Green"]; So let’s explain what is happening here, is an array containing two strings and , then the second array otherarr contains two strings and the . Usually, when we add this array without the three periods operator it will add the new array into the other array. But as we have the spread operator it will add the element of the array into the other array. newarr Red Yellow newarr You can pass elements of an array as arguments to a function function addThreeNumbers(x,y,z){
   return x+y+z;
}
let args = [1,2,3];
addThreeNumbers(...args); // 6 Another use case is that you can pass an element of an array as a function. in the above example, we have a function with three parameters which return the sum of these three numbers. Now we have an array with three values 1,2,3. In a normal state, we can pass three arguments to the function but with the help of the spread operator, we just pass the array with the three-dot operator (…), which will spread out the array to each element of the function. addThreeNumbers x,y,z Note: If we have a fourth element in the array it going to ignore the fourth element in the array, like the example below. function addThreeNumbers(x,y,z){
   return x+y+z;
}
let args = [1,2,3,4];
addThreeNumbers(...args); // 6 . Copy arrays let arr1 = [1,2,3];
let arr2 = [...arr1] If we have arr1 we can use the spread operator to copy the array into the second array. Concatenate array let arr1 = [1,2,3];
let arr2 = [5,6,7];
arr1.concat(arr2); // [1,2,3,5,6,7]
arr1 = [...arr1 ...arr2]; // [1,2,3,5,6,7] Another use case is that we can concatenate arrays together, normally how we do this, is we use the method to concatenate arrays. With the spread operator, we can concatenate arrays too. concat Reference Also published here. Lead image generated with stable diffusion.

Read My Stories

Too Long; Didn't Read

Making security fun one episode at a time

Exploring Common Uses Cases of the JavaScript Spread Syntax (…)

Too Long; Didn't Read

Benson Arafat

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Exploring Common Uses Cases of the JavaScript Spread Syntax (…)

Too Long; Didn't Read

Benson Arafat

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES