JavaScript’s Spread Operator or Amazing 3 Dots

The spread operator “spreads out” individual values

4 min readOct 22, 2020

Moons in a V formation — Photo by Anderson Rian on Unsplash.

Unlike ES5, ES6 is not just a modest set of new APIs added to the language. ES6 is a radical jump forward for the language. It includes a lot of new syntactic forms, some of which may take quite a bit of getting used to.

ES6 introduced a new ... operator that's typically referred to as the spread or rest operator, depending on where/how it's used. Let's take a look.

Rest Parameters

Rest parameters collect all the remaining elements into an array which allows us to do really elegant function definitions:

function add(a, b) {
    return a + b;
}add(1, 3, 5, 7, 9) //returns 4

The function call above returns 4 as in JavaScript it is possible to call a function with any number of arguments. However, only the first two arguments will be counted.

With rest parameters, we can gather any number of arguments into an array. So the add function can be rewritten like this:

Rest parameters have to be at the last argument because it collects all remaining arguments into an array, so a function definition like this will error out:

function abc(a, ...b, c) {
  ...
  return;
}//Uncaught SyntaxError: Rest parameter must be last formal parameter

We can separately define the first arguments, and the rest of the arguments in the function call (no matter how many they are) will be collected into an array by the rest parameter:

Since the rest parameter gives us an array, we can use array methods like Array.find, Array.map, etc.

Arguments keyword

Before rest parameters existed, to get all the arguments in a function, arguments were used:

function perlFunction() {
  return arguments;
}perlFunction("perl", 1987, true)

perlFunction returns the arguments and their indexes: [Arguments] { 0: "perl", 1: 1987, 2: true }.

There are two main disadvantages of using the arguments keyword:

It returns an array-like object. This means any array methods like Array.filter or Array.map cannot be performed.
arguments cannot be used in arrow functions. This is because arrow functions do not have their own this and, therefore, no arguments object either.

Spread Operator

The spread operator allows us to expand elements. With rest parameters, we can get a list of arguments into an array. Spread operators, however, let us unpack elements in an array to single/individual arguments.

Some scenarios where this capability is useful include:

Adding array elements to an existing array

const array = ["Bill", "Steven", "Dan"];
const newArray = ["Bjarne", ...array];

The value of newArray will be ["Bjarne", "Bill", "Steven", "Dan"].

Unlike rest parameters, you can use the spread operator as the first argument. So if you need to add an element as the last element in your array, you can do this:

const names = [...array, "Bjarne"];

The value of names in this case will be ["Bill", "Steven", "Dan", "Bjarne"].

Copying arrays

We can use the spread operator to copy an array. This copies array into array2:

const array = [1, 2, 3];
const array2 = [...array];

Now we can do things on array2, and any changes done to array2 will not have any effect on array.

Pass elements of an array to a function as separate arguments

If we had an array that we wanted to pass as a list of arguments in a function, we would use the spread operator. Let's reuse our add function:

The add function call is similar to doing this: add(1, 3, 5).

We used arrays to demonstrate the spread operator, but any iterable also works. So, if we had a string const str = "Bjarne", [...str] translates to [ "B", "j", "a", "r", "n", "e"].

Conclusion

... could be used to represent either a spread operator or a rest parameter. It entirely depends on how we use it, thus, depending on the context in which we use the three dots, it is easy to tell whether we are using it as a rest parameter or as a spread operator.

When ... is at the end of function parameters, it’s a rest parameter and gathers the rest of the list of arguments into an array.
When ... occurs in a function call or something similar, it’s called a “spread syntax” and expands an array into a list.

Use patterns:

Rest parameters are used to create functions that accept any number of arguments.
The spread syntax is used to pass the value of an array to functions that normally require a list of many arguments.

Rest parameters and Spread syntax work in the opposite direction. But together they help to travel between a list and an array of parameters with ease. They offer a lot of benefits to using them making the code more readable.