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.

 Using the New Google ML Kit Document Scanner for Flutter Apps

Building a ChatGPT Clone on Flutter With the OpenAI API

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Building a ChatGPT Clone on Flutter With the OpenAI API

3 JavaScript Performance Mistakes You Should Stop Doing

A Simple Introduction to Arrays In JavaScript

Array Filter vs Array Reduce vs For Loop

Arrays in Ruby: Benefits and Costs to Use Them

Building a ChatGPT Clone on Flutter With the OpenAI API

3 JavaScript Performance Mistakes You Should Stop Doing

A Simple Introduction to Arrays In JavaScript

Array Filter vs Array Reduce vs For Loop

Arrays in Ruby: Benefits and Costs to Use Them

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps