How to use the rest operator in Javascript - beginner friendly examples

After explaining the spread operator (you can check all about it in the link below), it's time to demystify the rest (...) operator. The two look exactly the same but they serve different functions. One thing they have in common, besides the identical syntax, is that they work with iterables like arrays, objects, sets or maps.

Article No Longer Available

The rest operator collects all remaining elements into an array or into an object. It can be used for destructuring or handling function parameters, especially when their number is unknown.

1. Object destructuring. In the example below we can see destructuring in action. All the properties we didn't want to put into individual variables are now stored into a separate object. We can access the properties of that object using the dot notation.

const myDoggo = {
  name: 'Twister',
  age: 5,
  breed: 'Labrador',
  favoriteToy: 'shoes',
  favoriteFood: 'anything goes',
  favoriteActivity: 'sleeping'
}


const {name, age, favoriteToy, ...otherProperties} = myDoggo;
console.log(name); // prints Twister
console.log(age); // prints 5
console.log(favoriteToy); // prints shoes
console.log(otherProperties) // prints {breed: 'Labrador', favoriteFood: 'anything goes', favoriteActivity: 'sleeping' }
console.log(otherProperties.breed) // prints Labrador

We can of course do the same thing with an array. We can access the items of the array using the square bracket notation:

const randomWords = ['minute', 'delete', 'fork', 'share', 'untitled'];
[one, two, ...rest] = randomWords;
console.log(one); // prints minute
console.log(two); // prints delete
console.log(rest); // prints ['fork', 'share', 'untitled']
console.log(rest[0]); // prints fork

2. Function parameters handling The rest parameter allows us to represent an indefinite number of arguments as an array. Let's see the code below.

const addNumbers = (a, b) => {
console.log(a + b)
}

addNumbers(34, 78, 56, 89); // returns 112

Maybe you were expecting the result to be 257? The thing is, if we define a function which requires two parameters and we call it with 10 arguments, Javascript won't throw an error but it will use only the first two arguments. With the rest parameter, this changes and our function can now use an unlimited number of arguments. All we need to do is to write something like this:

const addNumbers = (a, b, ...otherArguments) => {
    console.log(a) 
    console.log(b)
    console.log(otherArguments[2])
    console.log(a + b + otherArguments[3])
}

addNumbers(34, 78, 56, 89, 785, 8966, 0);
// prints 34
// prints 78
// prints 785
// prints 9078

What happens is that, under the hood, the arguments will be split. Two individual ones and the array which can hold an unlimited number of arguments. Therefore, these two lines of code

console.log(otherArguments[2])
console.log(a + b + otherArguments[3])

just mean the second element of the `[56, 89, 785, 8966, 0] array (so 785) and 34 + 78 + the third element of the [56, 89, 785, 8966, 0] array (which is 8966).