2-Dec

How ... works in Javascript

The ... operator that arrived to javascript with ES6 is really handy, and can be used in quite a lot of situations. Technically it is two different things; a Rest parameter and a spread operator. Let's take a look at how they work.

2 min read

By Dag Stuan

December 2, 2019

Rest parameter

Lets say you have an array such as this one:

const myArray = ["Lisa", "Homer", "Bart"];

If you only want the first element of the array, while keeping the rest of the elements in a separate list, you can split the array like this

const [firstName, ...restOfTheNames] = myArray;

console.log(firstName); // Lisa
console.log(restOfTheNames); // ["Homer", "Bart"]

As you can see, using ...restOfTheNames puts the remaining elements of the list into a new list. This is called destructuring and is handy in a number of ways. It can also be used for objects, like this:

const person = {
  firstName: "Lisa",
  lastName: "Simpson",
  homeTown: "Springfield",
};

const { firstName, ...restPerson } = person;

console.log(firstName); // "Lisa"
console.log(restPerson); // { lastName: "Simpson", homeTown: "Springfield" }

As shown above, destructuring lets us extract the firstName property, while keeping the rest in a separate object.

Finally, the rest parameter is really useful when working with function arguments:

function func(firstArgument, ...rest) {
  // implementation
  console.log(firstArgument);
  console.log(rest);
}

func("Lisa", "Simpson", "Springfield");

In the example above, firstArgument will contain "Lisa" while the rest argument will be a list containing the rest of the arguments. In this case ["Simpson", "Springfield"]

Spread operator

If the rest parameter was yin, the spread operator would be its yang. It looks exactly the same as the rest parameter, but works a little bit differently.

The spread operator lets us expand elements such as objects and arrays. Lets see how it works.

const withoutMarge = ["Lisa", "Homer", "Bart"];

const wholeFamily = ["Marge", ...withoutMarge];

The operation above "spreads" the withoutMarge-array into the wholeFamily array. And the resulting array will contain all the names ["Marge", "Lisa", "Homer", "Bart"]. Spreading can also be used to extend objects, like this:

const person = {
  firstName: "Lisa",
  lastName: "Simpson",
  homeTown: "Springfield",
};

const extended = {
  ...person,
  brother: "Bart",
};

console.log(extended);
// {
//   firstName: "Lisa",
//   lastName: "Simpson",
//   homeTown: "Springfield"
//   brother: "Bart"
// }

This way of using the spread operator is also handy for overwriting properties in existing objects.

const person = {
  firstName: "Lisa",
  lastName: "Simpson",
  homeTown: "Springfield",
};

const overwritten = {
  ...person,
  homeTown: "New York",
};

console.log(overwritten);
/*
{
  firstName: "Lisa",
  lastName: "Simpson",
  homeTown: "New York"
}
*/

Technically, using the spread operator to extend and overwrite parts of objects actually creates new objects, which means it can be used instead of the old and cumbersome Object.assign() API. If you want to copy an object, you can just do this:

const obj = {
  // ..properties
};

const copyObj = { ...obj };

In summary, the ... operator can be used either as a rest parameter, or a spread operator. The rest parameter lets us gather array elements, object values, or function arguments into a single variable, while the spread operator lets us expand them to multiple variables.

Hopefully this article showed you some useful examples, happy coding!

Up next...

Loading…

Proudly powered by