Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 13 additions & 14 deletions 32 - The ...rest param in Functions and destructuring.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,62 +2,62 @@ Whenever you see three little dots, it's not just a spread. It could also be wha

If the **spread** param takes one thing, which is an array, and **unpacks it into multiple items**, or takes a string and unpacks it into multiple items of an array, the **rest** param does the exact opposite. It takes multiple things and **packs it into a single array**.

There's two places where you'll use a rest param. That is first in a function, and second in a destructuring situation.
There are two places where you'll use a rest param. That is first in a function, and second in a destructuring situation.


Let's say we have a function called `convertCurrency`, and it takes two things: a `rate` which is known, but it's also going to take a unknown amount of currency. Here we don't really know how many the person is going to pass.
Let's say we have a function called `convertCurrency`, and it takes two things: a `rate` which is known, but it's also going to take an unknown amount of currency. Here we don't really know how many the person is going to pass.

Now you might be saying, "That's fine, don't pass any arguments there, and use the arguments object." The problem here is that we actually want the first thing to be the `rate`, and then the rest of them to be the amounts that the person would like to convert.

Let's say we're going to convert currency, and we want to convert at $1.54 per dollar. Then we want to pass a whole bunch of dollar values that we have. Before now, there wasn't really a great way to do that, but now we have the rest param, which can pack the rest of them into an array:

```js
function convertCurrecnty(rate, ...amounts){
function convertCurrency(rate, ...amounts){
console.log(rate, amounts);
}

convertCurrecnty(1.56, 10, 23, 52, 1, 56);
convertCurrency(1.56, 10, 23, 52, 1, 56);
```


In the console, the first value is just the `rate` that was passed in. But because we did a rest param for `amounts`, it captured everything else that was passed to this function. If we run it again with only one item:

```js
function convertCurrecnty(rate, ...amounts){
function convertCurrency(rate, ...amounts){
console.log(rate, amounts);
}

convertCurrecnty(1.56, 10);
convertCurrency(1.56, 10);
```

Here we get our `rate`, and an array of one actual item, in this case, `10`.

That's really handy because we can do something like this:

```js
function convertCurrecnty(rate, ...amounts){
function convertCurrency(rate, ...amounts){
return amounts.map(amount => amount * rate);
}

const amounts = convertCurrecnty(1.56, 10, 23, 52, 1, 56);
const amounts = convertCurrency(1.56, 10, 23, 52, 1, 56);
console.log(amounts);
```
We should be able to get an array of all of those converted currency values.

You can use as many arguments as you need. If you had `rate`, and `tax`, and `tip`, and then amounts, what that would give us is three things. Let's take a look here:
You can use as many arguments as you need. If you had `rate`, and `tax`, and `tip`, and then amounts, that would give us three things. Let's take a look here:

```js
function convertCurrecnty(rate, tax, tip, ...amounts){
function convertCurrency(rate, tax, tip, ...amounts){
console.log(rate, tax, tip, amounts);
return amounts.map(amount => amount * rate);
}
const amounts = convertCurrecnty(1.56, 10, 23, 52, 1, 56);
const amounts = convertCurrency(1.56, 10, 23, 52, 1, 56);
```
In the console we can see that we get our `rate`, `tax`, and `tip`, and if you open it in your inspector you'll see that it's a true array, not an arguments object, or anything weird and array-ish. It's a true array.

So that's the first use case for rest param.

As a second use case, we can use it when we're destructuring. We took a look at this a whole bunch of posts ago, but let's take a look at a example again.
As a second use case, we can use it when we're destructuring. We took a look at this a whole bunch of posts ago, but let's take a look at an example again.

Let's say that we have an array of data that came from a jogging application, and it gives us some data:

Expand Down Expand Up @@ -86,7 +86,6 @@ What if I wanted the rest of them? We do ...runs, and that should bundle up ever

All of our run data to the end will be bundled up into an array, and you could loop over that and use that data.


We looked at another example earlier, where we had a team array. The first person would be the captain, second person would be the assistant captain, and then the rest of the people would be on the actual team. We could do something like this:

```js
Expand All @@ -96,4 +95,4 @@ We looked at another example earlier, where we had a team array. The first perso
```
So if we run that, we'll get `Wes`, and `Kait`, and because we used the rest param, we get an array of players, with `Lux`, `Sheena` and `Kelly`.

The rest param might not something you're going to use all the time, but it really helps you when you don't have to do any splicing or counting on indexes. You can just say, "Just give me the rest," for either a function definition, or for when you're destructuring an array.
The rest param might not be something you're going to use all the time, but it really helps you when you don't have to do any splicing or counting on indexes. You can just say, "Just give me the rest," for either a function definition, or for when you're destructuring an array.