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
