Javascript

What do the three dots (spread operator) mean in Javascript?

Sponsor

The spread operator, or 3 dots, is an operator 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 operator 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.

javascript Copy
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:

javascript Copy
let numbers = [ 1, 2 ]; // Returns 15 (i.e. 5 + 7 + 1 + 2) myFunction(5, 7, ...numbers);

Merging Arrays

Another useful way to use the spread operator is to merge arrays. For example, we can merge two separate arrays into a new one using two spread operators:

javascript Copy
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:

javascript Copy
let x = [ 1, 2 ]; // Returns [] 4, 5, 1, 2 ] let newArray = [ 4, 5, ...x ];

Merge Objects

Finally, we can use the spread operator to merge objects. In the below example, we merge two objects with key/value pairs into one object:

javascript Copy
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:

javascript Copy
let obj1 = { name: "John" }; let obj2 = { name: "Jake" }; // Returns { name: "Jake" } let newObj = { ...obj1, ...obj2 };

And that's how spread operators 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.

Last Updated Tuesday, 9 November 2021

Subscribe to Newsletter

Subscribe to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email