What are the three dots (...) or spread operator in Javascript?
📣 Sponsor
The spread operator, spread syntax or 3 dots (...), is a type of syntax in Javascript which is used by both function calls and in 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.
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 x, y, z and a.
let numbers = [ 1, 2, 3, 4 ];
let myFunction = function(x, y, z, a) {
return x + y + z + a;
}
// Returns 10
myFunction(...numbers);
This can be combined with other values, so the following is also valid, using the same function as before:
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 new
, for example:
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 merge objects. In the below example, we merge two objects with key/value pairs into one object:
let obj1 = { name: "John" };
let obj2 = { age: 114 };
// Returns { name: "John", age: 114 }
let newObj = { ...obj1, ...obj2 };
If we try to merge two objects and there is a duplicate key, the second object will take precedence and overwrite the first one, as shown below:
let obj1 = { name: "John" };
let obj2 = { name: "Jake" };
// Returns { name: "Jake" }
let newObj = { ...obj1, ...obj2 };
And that's how spread syntax work - they let us run functions with arrays easily, and are good for merging objects and arrays. You can find more Javascript tutorials at the bottom of this page.
More Tips and Tricks for Javascript
- Javascript Ordinals: Adding st, nd, rd and th suffixes to a number
- Javascript Array Concat Method
- A Look at the New Array Methods coming to Javascript
- Javascript Comments
- Javascript Add Event Listener to Multiple Elements
- Deleting an Item in an Array at a Specific Index
- Javascript Shallow Copies - what is a Shallow Copy?
- Setting the Default Node.JS version with nvm
- Creating 3d Animated Gradient Effects with Javascript and WebGL
- Future Javascript: Javascript Pipeline Operators