Understanding the JavaScript Rest Parameter

If you’re unsure what the rest operator is and what it does, you’re in the right place!

You might have seen a JavaScript function that looks like this:

What are those three dots … doing in front of a function parameter?

The three dots are called the rest parameter syntax. A rest parameter allows us to represent an indefinite number of arguments as an array. Why does this matter? Well, let’s take a look at a simple function that adds numbers together.

This is a function expression that returns the total sum of all the numbers added together. Currently, we have three arguments, but what if we don’t know how many numbers we would need to add? For instance, if we were fetching the numbers from a database, we would have no idea how many numbers there are.

The example below has more than three arguments passed to it.

This doesn’t work at all. We need a dynamic parameter that captures all the values passed to it.

Rest Parameters to the Rescue!

Notice how we have captured all the values into an array now. Since we can’t add integers and arrays, we need to loop over the array, and then add the numbers together.