Как принять любое количество аргументов в стрелочную функцию JavaScript

Перевод статьи How to Accept Any Number of Arguments in a JavaScript Arrow Function.

Когда вы создаете функции, работая с кодом JavaScript, одной из самых важных вещей, которую вам следует учитывать — это аргументы, которые она будет принимать в качестве входных данных. Управление обработкой аргументов функции в зависимости от их типа обычно реализуют путем назначения им имен.

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

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

Функция, которую мы будем разрабатывать по ходу изложения статьи, будет совсем простой — мы хотим создать функцию, которая принимает несколько аргументов и складывает их вместе.

Если бы мы заранее знали, сколько аргументов мы принимаем, то это было бы действительно легко. Мы могли бы сделать это, написав что-то вроде кода следующего вида:

function sum(a, b){
    let sum = a + b;
    return sum;
}

console.log(sum(2, 3)) // 5

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

function sum(a, b){
    let sum = a + b;
    return sum;
}

console.log(sum(2, 3, 4)) // 5

Мы ожидаем получить результат, как сумму трех чисел, то есть значение 9, но по-прежнему в консоли видим то, что и ранее: 5. Это говорит нам о том, что функция, по сути, игнорирует все другие значения, которые не входят в число перечисленных при ее объявлении двух аргументов. Отлично, а что если мы будем использовать при объявлении функции максимальное количество аргументов, которое нам может понадобиться? Давай посмотрим что произойдет в следующем примере:

function sum(a, b, c){
    let sum = a + b + c;
    return sum;
}

console.log(sum(2, 3)) // NaN

И так, если мы передадим слишком мало аргументов, то в консоли выведет NaN. Функция не может принимать аргументы число которых меньше ожидаемого количество. Точнее может ;), но получаемый при этом результат будет некорректен.

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

Объект arguments является локальной переменной, которая доступна в области видимости функции, кроме стрелочных функций. Используя внутренний объект arguments вы можете ссылаться на ее аргументы. Значения аргументов, с которыми вызывается функция, доступны по индексу с соответствующим номером, начинающимся с 0.

По сути, это позволяет нам получить доступ ко всем аргументам, переданным в функцию в текущем вызове. И поскольку мы можем получить значение длины объекта arguments, то можем создать простой цикл, который будет возвращать сумму её аргументов.

function sum(){
        let sum = 0;
        for (let i = 0; i 
                
Таким образом, теперь мы можем передавать в нашу функцию любое количество аргументов, значения которых хотим сложить, и получить корректный результат.
                

                  
Объект arguments — это объект, подобный массиву, позволяющий извлекать переданные функции значения аргументов по их номерам, а не по именам параметров. Обратите внимание, что технически это все же объект, а не массив, хотя он имеет свойство lenght. И правильнее его рассматривать как объект, который имеет некоторые пронумерованные свойства. Примечание переводчика.
                
                
Стрелочные функции
                
Как нам стало известно из информации MDN по ссылке выше, что когда мы используем стрелочные функции, то объект arguments внутри области видимости функции нам недоступен. Однако стрелочные функции также позволяют принимать любое количество входных параметров. Этот эффект достигается использованием вместо ссылки на объект arguments, параметра вида rest (остаточных параметров), который используется вместе с оператором расширения .... Параметру rest может быть присвоено любое имя, которое удобно использовать. Для реализации нашей функции я назову его args.
                
const sum = (...args) => {
    let sum = 0;
    for (let i = 0; i 
                
Как видите, структура кода нашей функции изменилась незначительно. В начале мы объявляем стрелочную функцию, а затем используем оператор расширения ... для того, чтобы передать содержимое параметра rest, которому мы присвоили имя args. Затем, как и в случае с исходной функцией, мы перебираем переданные аргументы и добавляем значение каждого к общей сумме.
                
Вот и все, что нам было нужно сделать! Надеюсь материал этой статьи поможет вам в будущем создавать функции с переменным числом аргументов.