Как работает rest-параметр (...args) в функциях?

Краткий ответ

Rest-параметр (…args) позволяет функции принимать неограниченное количество аргументов как массив. Три точки (…) перед именем параметра “собирают” все остальные аргументы в один массив, что удобно, когда не знаешь, сколько аргументов передадут.

// Функция с rest-параметром
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
 
// Использование
console.log(sum(1, 2, 3));        // 6
console.log(sum(1, 2, 3, 4, 5));  // 15
console.log(sum());               // 0

Полный ответ

Rest-параметр — как волшебный мешок, в который можно положить сколько угодно предметов, и он всё вместит! Три точки (…) “собирают” все аргументы в один массив, чтобы с ними было удобно работать. 🎒

Что такое rest-параметр

Rest-параметр — это способ собрать все аргументы функции в один массив. Он обозначается тремя точками (…) перед именем параметра:

Простые примеры

Базовое использование

function showItems(...items) {
  console.log('Получено элементов:', items.length);
  console.log('Элементы:', items);
}
 
showItems('яблоко', 'банан', 'апельсин');
// Получено элементов: 3
// Элементы: ['яблоко', 'банан', 'апельсин']

Смешение с обычными параметрами

function greet(greeting, ...names) {
  return greeting + ', ' + names.join(' и ');
}
 
console.log(greet('Привет', 'Иван', 'Петр', 'Мария'));
// 'Привет, Иван и Петр и Мария'

Как работает rest-параметр

Всегда создаёт массив

function checkType(...args) {
  console.log(Array.isArray(args)); // true
  console.log(typeof args);         // 'object'
  console.log(args.length);         // количество аргументов
}
 
checkType(1, 2, 3); // true, 'object', 3

Должен быть последним

// ✅ Правильно — rest-параметр в конце
function correct(first, second, ...rest) {
  // ...
}
 
// ❌ Ошибка — rest-параметр не в конце
// function wrong(...rest, last) {
//   // SyntaxError!
// }

Когда использовать rest-параметр

Для функций с переменным числом аргументов

// Математические операции
function multiply(...numbers) {
  return numbers.reduce((result, num) => result * num, 1);
}
 
console.log(multiply(2, 3));      // 6
console.log(multiply(2, 3, 4));   // 24

Для создания универсальных функций

// Логирование с переменным числом аргументов
function log(...messages) {
  const timestamp = new Date().toLocaleTimeString();
  console.log(`[${timestamp}]`, ...messages);
}
 
log('Пользователь', 'Иван', 'вошёл'); 
// '[10:30:15] Пользователь Иван вошёл'

Частые ошибки

Путаница с arguments

function oldWay() {
  // arguments — не настоящий массив
  console.log(Array.isArray(arguments)); // false
  // Нужно преобразовывать: Array.from(arguments)
}
 
function newWay(...args) {
  // args — настоящий массив
  console.log(Array.isArray(args)); // true
  args.map(item => console.log(item)); // Можно использовать методы массива
}

Неправильное расположение

// ❌ Ошибка — rest не в конце
// function bad(param1, ...rest, param2) { }
 
// ✅ Правильно — rest в конце
function good(param1, param2, ...rest) { }

Простые правила

…args — собирает все остальные аргументы в массив 🎯
Последний параметр — rest должен быть последним в списке параметров ⚠️
Один rest — в функции может быть только один rest-параметр 📦
Настоящий массив — в отличие от [arguments], rest создаёт настоящий массив ✅
Гибкость — удобно для функций с переменным числом аргументов 🔄

Rest-параметр — это удобный способ работать с функциями, когда не знаешь, сколько аргументов в них передадут. Современный и простой в использовании! 💪

Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪