Understanding Rest Parameter Syntax
Tags: webdev, javascript, learning, beginners
Published: 2019-08-20 11:58:07

---
title: Understanding Rest Parameter Syntax
published: true
description: You finally understand spread syntax, but what's this other thing? It looks the same but is somehow different. You're probably looking at an example of rest syntax, come learn about it.
tags: webdev, javascript, learning, beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pqzwr0o2xuw4vyam9hx7.jpg
canonical_url: https://tenmilesquare.com/understanding-rest-parameter-syntax/
---

Welcome to Rest parameter syntax. It's like the spread operator! 

{% link https://dev.to/laurieontech/5-uses-for-the-spread-operator-b9i %}

...except not.

I want to say upfront that I'm not justifying the repeated use of the `...` symbol in the JavaScript language. But hopefully, this post will help you understand how spread and rest are different yet similar.

## The use case for rest

Let's say that you want to pass in an unknown number of arguments to a function. That's when you want to use the rest parameter!

```javascript
function testRest(arg1, arg2, ...otherArgs) {
   console.log(arg1) // 1
   console.log(arg2) // 2
   console.log(otherArgs) // [3, 4, 5]

}

testRest(1, 2, 3, 4, 5)
```
In this example `arg1` and `arg2` are passed through as expected, then all of the additional arguments are added to the `otherArgs` array.

One of the benefits is that `otherArgs` is truly an array. That means all of your array functions are available.

You can look at the number of arguments inside of it.

```javascript
function testRest(arg1, arg2, ...otherArgs) {
   const numOfArgs = otherArgs.length() // 3

}

testRest(1, 2, 3, 4, 5)
```

You can also manipulate it using array prototype functions. `map`, `filter`, `reduce`, `flat`, etc.

## Single Extra Argument

One thing to keep in mind is that `otherArgs` will always create an array. That means that a single argument will be wrapped in an array.


```javascript
function testRest(arg1, arg2, ...otherArgs) {
   console.log(arg1) // 1
   console.log(arg2) // 2
   console.log(otherArgs) // [3]

}

testRest(1, 2, 3)
```

Additionally, not including any additional arguments will result in an empty array.


```javascript
function testRest(arg1, arg2, ...otherArgs) {
   console.log(arg1) // 1
   console.log(arg2) // 2
   console.log(otherArgs) // []

}

testRest(1, 2)
```

## Remember destructuring?

If you need a quick refresh on destructuring assignment check out this post.

{% link https://dev.to/laurieontech/3-powerful-examples-of-destructuring-assignment-jlf %}

As it turns out, you can use destructuring and the rest parameter together.

```javascript
function testRest(...[first, second, third]) {
   console.log(first) // 1
   console.log(second) // 2
   console.log(third) // 3

}

testRest(1, 2, 3)
```

Keep in mind that destructuring expects the arguments to be there. If you break that contract, you should know what to expect.

If you don't include a destructured expected argument, it will result in an undefined reference.

```javascript
function testRest(...[first, second, third]) {
   console.log(first) // 1
   console.log(second) // 2
   console.log(third) // undefined

}

testRest(1, 2)
```

If you include an argument beyond what you've destructured, that argument will be dropped.
```javascript
function testRest(...[first, second, third]) {
   console.log(first) // 1
   console.log(second) // 2
   console.log(third) // 3
   // 4 is not destructured

}

testRest(1, 2, 3, 4)
```

### Conclusion

And there you have it! As you can see in the examples above the main difference between rest and spread is location.

Spread syntax can appear inside a function or when calling the function. Rest parameter syntax is limited to the function signature itself. Keep that in mind if you're trying to determine which is being used.

Hope this helped you understand the concepts better.

As always, if you're interested in concepts like this one, check out some of these posts:

{% link https://dev.to/laurieontech/splice-slice-shoot-i-meant-shift-424p %}
{% link https://dev.to/laurieontech/let-s-loop-for-in-vs-for-of-4loh %}
{% link https://dev.to/laurieontech/deep-vs-shallow-copy-with-examples-cfb %}