Using rest and spread operators in JavaScript

The three dots (...) signify both the rest and spread operators in JavaScript, their functionality depends on where they're used. These operators are used when working with arrays and objects.

What's the difference?

The rest operator is used to gather a set of values into one container, while the spread operator is used to take the values out of a container, possibly into another one. Demonstrations are given below.

Using rest and spread operators in arrays

The operators can either be used to collect values into a single array or concatenate elements from another array with another one.

Using rest in arrays

Let's look at a function that takes more than one argument, for example, say you're only interested in the first argument passed but would like to store the remaining for later:

(function(first_elem, ...remaining){
  console.log(first_elem);
  console.log(remaining);
})('apple', 1, 2, 3, 'mangoes');

// apple
// [1, 2, 3, "mangoes"]

all other arguments passed are now stored in an array remaining, this technique is especially useful when you do not know the number of arguments that would be passed.

Using spread in arrays

we'll be looking at another example with an array passed as the single argument to a function, we'll use the spread operator to take all the elements out and print to the console.

const numbers = [1, 2, 3, 4, 5];
(function(single_array){
  console.log(...single_array);
})(['James','Janet', ...numbers]) // spreading numbers array into this one
// James Janet 1 2 3 4 5

Notice how I used the spread operator to copy elements from the numbers array into the single_array. Spread is one way to merge a copy of an array or object into another.

Combining both in arrays

It's also possible to use both operators interchangeably, just be careful not to mistake one for the other, I'll indicate what operator I used where.

(function(...fruits){
  const extra = ['squash', 'banana', ...fruits]; //spread
  console.log(extra)
})('pinapple', 'apple', 'orange');

// ["squash", "banana", "pinapple", "apple", "orange"]

Using rest and spread operators in objects

The use cases for the spread and rest operators in objects are not different from that of arrays.

Using rest in objects

Imagine we had a large object given to us from an API response. If we wanted only the users property from the object, we can use destructuring to take them out and save the rest in another variable.

const response = {
  users: [
    {
      name: 'Anthony Davis',
      occupation: 'athlete'
    },
    {
      name: 'Chance the rapper',
      occupation: 'artiste'
    }
  ],
  response_time: '20ms',
  cached: true,
  request_count: 2
}

const {users, ...metadata} = response;

console.log(metadata); 
// {response_time: "20ms", cached: true, request_count: 2}

If you're not familiar with destructuring, [check out this article](https://theninja.blog/how-to-destructure-arrays-and-objects-in-java-script-part-2/ "How to destructure arrays and objects").

Using spread in objects

We can use the spread operator to concatenate another one object with another.

Using the previous code snippet:

const response = {
  users: [
    {
      name: 'Anthony Davis',
      occupation: 'athlete'
    },
    {
      name: 'Chance the rapper',
      occupation: 'artiste'
    }
  ],
  response_time: '20ms',
  cached: true,
  request_count: 2
}

const {users, ...metadata} = response; 

// using spread to merge both variables into one object

const merged = {users, ...metadata};

console.log(merged);

// {users: Array(2), response_time: "20ms", cached: true, request_count: 2}

To read more on them, check out this doc on MDN [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax "spread and rest syntaxes ").

Using rest and spread operators in JavaScript

Comments

More from this blog

How to optimize Vue.js applications

The difference between transition and transition-group components in Vue

Sorting arrays with JavaScript: a deep look into the sort() method

How to build a Markdown blog using Gridsome

How to trigger a Netlify build using Storyblok webhooks

What's the difference?

Using rest and spread operators in arrays

Using rest in arrays

Using spread in arrays

Combining both in arrays

Using rest and spread operators in objects

Using rest in objects

Using spread in objects

Command Palette

Comments

More from this blog

What's the difference?

Using rest and spread operators in arrays

Using rest in arrays

Using spread in arrays

Combining both in arrays

Using rest and spread operators in objects

Using rest in objects

Using spread in objects