The , or (...), is a type of syntax in Javascript that is used by both function calls and arrays/objects. It has a multitude of different uses, so let's take a look at how we use the spread syntax in real Javascript code. spread operator spread syntax 3 dots In function calls We can use the 3 dots in Javascript function calls to convert an array into a set of arguments for a function. Let's look at an example. Below, our array is converted into the values for , , , and . x y z a let numbers = [ 1, 2, 3, 4 ];

let myFunction = function(x, y, z, a) {
    return x + y + z + a;
}

// Returns 10
myFunction(...numbers); , so the following is also valid, using the same function as before: This can be combined with other values let numbers = [ 1, 2 ];

// Returns 15 (i.e. 5 + 7 + 1 + 2)
myFunction(5, 7, ...numbers); This can also be used when calling a constructor with , for example: new let numbers = [ 1999, 26, 3 ];

let thisDate = new Date(...number); Merging Arrays Another useful way to use the spread syntax is to merge arrays. For example, we can merge two separate arrays into a new one using two spread syntaxes: let x = [ 1, 2, 3 ];
let y = [ 4, 5, 6 ];

// Returns [ 1, 2, 3, 4, 5, 6 ]
let newArray = [ ...x, ...y ]; Similar to before, we can combine this with other values and still get the same outcome: let x = [ 1, 2 ];

// Returns [] 4, 5, 1, 2 ]
let newArray = [ 4, 5, ...x ]; Merge Objects Finally, we can use the spread syntax to . In the below example, we merge two objects with key/value pairs into one object: merge objects let obj1 = { name: "John" };
let obj2 = { age: 114 };

// Returns { name: "John", age: 114 }
let newObj = { ...obj1, ...obj2 }; , the second object will take precedence and overwrite the first one, as shown below: If we try to merge two objects and there is a duplicate key let obj1 = { name: "John" };
let obj2 = { name: "Jake" };

// Returns { name: "Jake" }
let newObj = { ...obj1, ...obj2 }; - they let us run functions with arrays easily, and are good for merging objects and arrays. And that's how spread syntax work Also published . here

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Decoding the Three Dots (…) Or Spread Operator in Javascript

Decoding the Three Dots (…) Or Spread Operator in Javascript

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Decoding the Three Dots (…) Or Spread Operator in Javascript

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES