How to use the rest operator in Javascript - beginner friendly examples
Tags: javascript, rest, beginners, developer
Published: 2020-04-08 20:02:06

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. 

{% link https://dev.to/cilvako/how-to-use-the-spread-operator-5b51 %}

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.

```javascript
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:

```javascript
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.

```javascript
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:

```javascript
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 

```javascript
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).