Передача переменного числа аргументов в функцию JavaScript

Быстрый ответ

Для того, чтобы создать функцию, которая принимает произвольное количество аргументов, применяется оператор разворота ...:

function sum(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(2, 4, 6)); // Вывод: 12

Этот оператор позволяет параметру ...numbers собирать все передаваемые аргументы в массив и далее работать с ними как с одной единицей.

Использование объекта arguments

В случае, когда оператор разворота не применяется, можно использовать объект arguments, который хранит все аргументы вызываемой функции:

function multiply() {
    let total = 1;
    for (let i = 0; i < arguments.length; i++) {
        total *= arguments[i];
    }
    return total;
}

console.log(multiply(2, 3, 4)); // Вывод: 24

Формирование динамичных аргументов

JavaScript допускает использование значений по умолчанию и необязательных параметров, позволяя гибко настраивать функции:

function greet({name = 'Гость', greeting = 'Привет'} = {}) {
    console.log(`${greeting}, ${name}!`);
}

greet({name: 'Алиса', greeting: 'Добро пожаловать'}); // Добро пожаловать, Алиса!

Визуализация

Представьте функцию JavaScript как художника, а её аргументы — как палитру цветов, которые доступны для создания полотна:

function artGallery(...colors) {
  let masterpiece = '🖼️ [ ';
  for (const color of colors) {
    masterpiece += `${color} 🎨, `;
  }
  masterpiece += ']';
  return masterpiece;
}

Используя различное количество цветов, мы можем получать разнообразные результаты:

artGallery('🔴', '🟢', '🔵'); // 🖼️ [ 🔴 🎨, 🟢 🎨, 🔵 🎨, ]
artGallery('🟡', '🟣', '🟤', '⚫', '⚪'); // 🖼️ [ 🟡 🎨, 🟣 🎨, 🟤 🎨, ⚫ 🎨, ⚪ 🎨, ]

Также функция в JavaScript может менять свое поведение в зависимости от передаваемых аргументов.

Работа с разнообразными параметрами

Использование оператора распределения

Оператор распределения позволяет быстро преобразовывать массивы в наборы аргументов и комбинировать их с rest-параметрами:

function invitees(...names) {
  console.log(`Приглашенные: ${names.join(', ')}`);
}

const people = ['Алиса', 'Боб', 'Чарли'];
invitees(...people); // Приглашенные: Алиса, Боб, Чарли

Подробнее об этом расскажет наш спикер на видео

Разработка пользовательских методов расширения

Для объединения пользовательских настроек и значений по умолчанию возможно создание собственных методов расширения:

function extend(defaults, options) {
    for (let key in options) {
        if (options.hasOwnProperty(key)) {
            defaults[key] = options[key];
        }
    }
    return defaults;
}

const myOptions = extend({color: 'синий', size: 'средний'}, {size: 'большой'});
console.log(myOptions); // {color: 'синий', size: 'большой'}

Работа с динамическими именованными параметрами

Благодаря деструктуризации и значениям по умолчанию вы можете создавать мощные и гибкие функции с именованными параметрами:

function configure({settingA = true, settingB = false} = {}) {
  console.log(`Настройка A: ${settingA}, Настройка B: ${settingB}`);
}

configure({settingB: true}); // Настройка A: true, Настройка B: true

Полезные материалы

1. Rest parameters – JavaScript | MDN — Официальная документация о rest параметрах в JavaScript.
2. Rest parameters and spread syntax — О параметрах rest и операторе разворота.
3. The arguments object – JavaScript | MDN — Подробности про объект arguments в функциях JavaScript.
4. arguments: A JavaScript Oddity — SitePoint — Обзор особенностей объекта arguments.
5. Higher-Order Functions :: Eloquent JavaScript — Описание функций высшего порядка и их применения с переменными аргументами.
6. Six nifty ES6 tricks — Шесть полезных трюков ES6, включая rest параметры и синтаксис spread.