Suggest an edit

Improve this article

Refine the answer for “...rest parameters”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What are rest parameters

> **Rest parameters** let you collect the **remaining arguments** of a function into a single **array**.

Syntax:

```javascript
function func(...args) {
  // args is an array of all passed arguments
}
```

---

## Example: sum of all numbers

```javascript
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(5, 10));      // 15
```

Here:

- `numbers` is the array `[1, 2, 3, 4]` or `[5, 10]`
- The number of arguments is not fixed

---

## Rest parameters always come **last**

```javascript
function show(first, second, ...rest) {
  console.log(first); // first argument
  console.log(second); // second
  console.log(rest); // array of all the rest
}

show("a", "b", "c", "d", "e");
// "a"
// "b"
// ["c", "d", "e"]
```

You cannot specify other parameters after a rest parameter:

```javascript
function badExample(...args, last) {} // Error
```

---

## Difference from `arguments`

| Property | `arguments` | `...rest` |
|---|---|---|
| Type | Array-like object | Real array |
| Array methods (`map`, `reduce`) | No | Yes |
| Works in arrow functions | No | Yes |
| Name is set explicitly | No | Yes |
| Modern standard | Old | ES6+ |

Comparison example:

```javascript
function old() {
  console.log(arguments); // [Arguments] { '0': 1, '1': 2 }
}

const modern = (...args) => {
  console.log(args); // [1, 2]
};

old(1, 2);
modern(1, 2);
```

---

## Another example - filtering arguments

```javascript
function filterNumbers(min, ...numbers) {
  return numbers.filter(n => n > min);
}

console.log(filterNumbers(10, 5, 15, 8, 25));
// [15, 25]
```

The first argument `min` is used separately,
and all the rest (`15, 8, 25`) go into the `numbers` array.

---

## Rest parameters with destructuring

```javascript
function logUser({ name, age, ...rest }) {
  console.log(name, age); // "Tim" 25
  console.log(rest); // { city: "Kyiv", active: true }
}

logUser({ name: "Tim", age: 25, city: "Kyiv", active: true });
```

Here `...rest` collects **all the other object properties**
that were not among the explicitly listed ones (`name`, `age`).

---

## Combination with the spread operator

`...` plays **two different roles**:

- In function parameters -> **rest** (collects arguments into an array)
- In a function call -> **spread** (expands an array into arguments)

```javascript
function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}

const values = [1, 2, 3];
console.log(sum(...values)); // 6
```

---

## Quick summary

| Feature | Description |
|---|---|
| Syntax | `function fn(...args) {}` |
| Type | Array |
| Number of arguments | Arbitrary |
| Array methods | Work |
| Order | Rest parameter is always last |
| Replacement for `arguments` | Yes |

---

## Simple analogy

> `...rest` is like a "collector of arguments":
> if you pass many values, it neatly gathers **all the extras** into an array.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts480 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.