...rest параметри

JavaScriptJunior~1 хв читання

Що таке rest-параметри

Rest-параметри дозволяють зібрати залишкові аргументи функції в один масив.

Синтаксис:

javascript

function func(...args) {
  // args - це масив усіх переданих аргументів
}

Приклад: сума всіх чисел

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

Тут:

numbers - це масив [1, 2, 3, 4] або [5, 10]
Кількість аргументів не фіксована

Rest-параметри йдуть завжди останніми

javascript

function show(first, second, ...rest) {
  console.log(first); // перший аргумент
  console.log(second); // другий
  console.log(rest); // масив усіх інших
}

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

Після rest-параметра не можна вказувати інші параметри:

javascript

function badExample(...args, last) {} // Помилка

Відмінність від `arguments`

Властивість	`arguments`	`...rest`
Тип	Псевдомасив	Справжній масив
Методи масиву (`map`, `reduce`)	Немає	Є
Працює у стрілкових функціях	Ні	Так
Ім'я задається явно	Ні	Так
Сучасний стандарт	Старий	ES6+

Приклад порівняння:

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);

Ще приклад - фільтрація аргументів

javascript

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

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

Перший аргумент min використовується окремо, а всі інші (15, 8, 25) потрапляють у масив numbers.

Rest-параметри з деструктуризацією

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 });

Тут ...rest збирає всі інші властивості об'єкта, що не увійшли до явно вказаних (name, age).

Комбінація зі spread-оператором

... виконує дві різні ролі:

У параметрах функції -> rest (збирає аргументи в масив)
У виклику функції -> spread (розкриває масив в аргументи)

javascript

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

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

Коротко запам'ятати

Особливість	Опис
Синтаксис	`function fn(...args) {}`
Тип	Масив
Кількість аргументів	Довільна
Методи масиву	Працюють
Порядок	Rest-параметр завжди останній
Заміна `arguments`	Так

Проста аналогія

...rest - це як "збирач аргументів": якщо ти передав багато значень, він акуратно складає всі зайві в масив.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.