Rest and Spread Operators in JavaScript: A Beginner's Guide

The same three dots cover several related operations in JavaScript. In an array literal or function call, spread expands an iterable value. Object spread copies an object's own enumerable properties. Rest parameters gather arguments into an array, while array and object rest destructuring collect the unmatched elements or properties into an array or object. These are compact operations, but the distinction matters.

What are Rest and Spread Operators?

Rest parameters and iterable spread were introduced in ECMAScript 6 (ES6), whilst object rest and spread arrived later. They are all denoted by the use of three dots (...). The Rest operator represents an indefinite number of arguments as an array, whilst the Spread operator expands iterable values or, in its later form, object properties.

Because they look very similar syntactically, it can be easy to get the two confused...

Rest Operator

The Rest operator is used to collect all remaining arguments into an array. It is denoted by three dots (...), followed by the name of the array that will contain the arguments. For example:

const sum = (...numbers) => {
  let total = 0;

  for (let number of numbers) {
    total += number;
  }
  return total;
};

console.log(sum(1, 2, 3));  //=> 6
console.log(sum(4, 5, 6, 7));  //=> 22

Above is a fairly simple example which uses the Rest operator to collect all remaining arguments into the numbers array. The sum function then loops through the array and adds up all the numbers, returning the total.

Spread Operator

The Spread operator is used to spread elements of an array or an object. It is denoted by three dots (...) followed by the name of the array or object. Here's an example:

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5, 6];

console.log(newNumbers);  //=> [1, 2, 3, 4, 5, 6]

In this example, the Spread operator is used to spread the elements of the numbers array into the newNumbers array.

June 2018: ECMAScript 2018 added rest and spread support for object properties. The object example below therefore post‑dates this article's original November 2016 publication; it was not part of ES6.

The Spread operator can also be used to merge two (or more) objects. For example:

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const newObj = { ...obj1, ...obj2 };

console.log(newObj);  //=> { a: 1, b: 2, c: 3, d: 4 }

In the above example, the Spread operator is used to merge the properties of obj1 and obj2 into a new object called newObj, which contains both ‑ in order.

How Rest and Spread Operators Can Help in Modern Web Development?

Both operators are useful in a variety of contexts in modern web development. For example:

• Function arguments:

  Rest operators can be used to collect all remaining arguments into an array. This is particularly useful when working with functions that take a variable number of arguments.

• Array manipulation:

  Spread operators can be used to spread the elements of an array, making it easy to concatenate arrays or create copies of existing arrays.

• Object manipulation:

  Spread operators can be used to merge the properties of two objects into a new object. This is particularly useful when working with libraries that return objects with a large number of properties.

• React development:

  Rest and Spread operators are commonly used in React development to pass props down to child components or spread the state of a component.

Pitfalls and Limitations

Whilst Rest and Spread operators are powerful features of JavaScript, they also have some potential limitations and pitfalls. Here are some things to keep in mind:

• Browser compatibility:

  This is always going to be the big one when trying to use new features in old browsers. Rest and Spread syntax may not be parsed by older browsers. Check your target audience and use a transpiler where those runtimes must be supported; a runtime polyfill cannot add parser syntax.

• Performance:

  Whilst Rest and Spread operators can be convenient, they can also have a negative impact on performance, especially when used over large arrays or objects. Keep this in mind when working with performance‑sensitive applications.

• Reference vs. value:

  Spread operators create a shallow copy of an array or object. This means that any nested arrays or objects within the original array or object will still be references to the original object, not separate copies.

• Syntax confusion:

  The use of three dots (...) can be confusing when first learning Rest and Spread operators. It's important to remember that the placement of the three dots determines whether it is a Rest or Spread operator.

Wrapping Up

Rest collects what remains, but the structure depends on where it appears: rest parameters and array destructuring produce an array, while object rest produces an object of unmatched own enumerable properties. Spread expands iterables in arrays and calls, or copies own enumerable properties into an object. Array and object spread are shallow, so nested objects remain shared.