# Rest Parameters, Spread Operator and Default parameters for Functions

Source: https://tpiros.dev/blog/default-function-parameters

Here we'll look at some great additions to [functions in JavaScript](https://fullstack-developer.academy/functions-in-javascript-es2015/) that arrived with ES2015.

## Rest Parameters

When working with functions, we often don't know how many parameters will come in. A typical scenario: a function that lets users modify their profile. The user might change their profile picture, their date of birth, or something else entirely.

Preparing for every possibility is painful from a code perspective. Let's look at an example. Say we want a function that adds up all the numbers passed to it. In older JavaScript, we'd write something like this:

```javascript
function add() {
  return Array.prototype.slice.call(arguments).reduce(function (acc, number) {
    return acc + number;
  });
}

console.log(add(3, 4, 6));
```

This works, but calling `Array.prototype.slice.call(arguments)` is ugly. The reason it's so convoluted: `arguments` isn't a real array, so it doesn't have a `.slice()` method. We need to call `Array.prototype.slice` to use slice on `arguments`, and by calling `.call()` we tell the code it's working on an array-like object. That was a mouthful.

In ES2015, we don't need to worry about any of that. Applying rest parameters (plus arrow functions) to this example strips the code right down:

```javascript
function add(...numbers) {
  return numbers.reduce((acc, number) => acc + number);
}

console.log(add(3, 4, 6));
```

The syntax for rest parameters is three dots followed by an argument name. And `...numbers` here is an actual `Array` instance, so we can call all array methods on it directly.

## Spread Operator

There are other great uses for the spread operator (the three-dot syntax). Copying or combining arrays becomes trivially easy:

```javascript
const fruit = ['apple', 'pear'];
const moreFruit = ['peach'];
const allFruit = [...fruit, ...moreFruit];
console.log(allFruit); // [ 'apple', 'pear', 'peach']
```

## Default parameters

While we're talking about function parameters, let's cover default parameters (sometimes called the "default operator").

This feature lets us set default values for function parameters. Here's a function in older JavaScript that takes a number and multiplies it by another number (the second argument). If the multiplier isn't passed in, we assume 1. If no number is provided, we assume 0:

```javascript
function multiply(num, multiplier) {
  num = num !== undefined ? num : 0;
  multiplier = multiplier !== undefined ? multiplier : 1;
  return num * multiplier;
}

console.log(multiply(), multiply(5), multiply(5, 2));
```

Simple enough here, but imagine checking 10 arguments. A small function would balloon fast.

With ES2015, we can specify default values right in the parameter list:

```javascript
function multiply(num = 0, multiplier = 1) {
  return num * multiplier;
}

console.log(multiply(), multiply(5), multiply(5, 2));
```

Much cleaner. The same concept applies to the profile-update example from earlier. We can set default parameters for the function and only update the values that actually change.