Итак, после представления в спецификации ES6, оператор ... (dot, dot, dot) занял свое место и часто используется JavaScript-разработчиками для управления массивами и другими итерируемыми сущностями.

Но, синтаксис ... может определять вызов как spread-, так и rest-оператора, в зависимости от того, где и как Вы его используете.

Для демонстрации того, как работают операторы в этой статье используются массивы. Но следует помнить, что spread- и rest-операторы эффективно взаимодействуют с любыми итерируемыми сущностями.

SPREAD (…)

Дававйте разберем вариант использования spread-оператора.

Для этого достаточно представить, что массив - это контейнер.

spread-оператор позволяет извлечь содержимое контейнера, не прикасаясь к нему. Кроме того, Вы сможете переместить полученное содержимое туда, куда Вам нужно.

Посмотрим на код, приведенный ниже:

const animals = [🦁, 🐘, 🐍, 🦍, 🐯];
const someOtherAnimals = [...animals];
// someOtherAnimals теперь содержит элементы 🦁, 🐘, 🐍, 🦍, 🐯 and
// animals остается неизменным

Итак, с помощью spread-оператора мы извлекли элементы массива animals и перенесли их в массив someOtherAnimals.

Также spread-оператор можно применять для сбора данных нескольких массивов в один массив:

const wild = [🦁, 🐘, 🐍, 🦍, 🐯];
const domestic = [🐐, 🐔, 🐱, 🐶];
const animals = [...wild, ...domestic];
// animals теперь содержит 🦁, 🐘, 🐍, 🦍, 🐯, 🐐, 🐔, 🐱, 🐶
// , а wild и domestic остаются неизменными.

Rest (…)

rest-оператор позволяет представить неопределенное количество аргументов в виде массива. В отличии от spread-оператора, который извлекает элементы массива, rest-оператор (или, как его еще называют: оператор сбора) группирует множество элементов в один массив.

Посмотрим, как это работает:

const addAll = (...numbers) => {
    return numbers.reduce((acc, num) => acc + num);
};
const sum = addAll(1, 2, 3, 4); // сумма 10
const sum1 = addAll(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // сумма 55

Таким образом, мы в любом количестве собираем аргументы для параметра numbers функции addAll, после чего функция возвращает сумму этих аргументов. Этот подход позволяет нам манипулировать данными параметра numbers как обычным массивом.

Еще один пример использования rest-оператора приведен ниже:

const multiplyByNum = (multiplier, ...numbers) => {
    return numbers.map(num => num * multiplier);
};
const multiplyBy2 = multiplyByNum(2, 1, 2, 3, 4);
// multiplyBy2 [2, 4, 6, 8]

В этом случае первым параметром функции multiplyByNum является аргумент multiplier, который выступает в качестве множителя для любого количества аргументов параметра numbers. Функция возвращает массив, каждый элемент которого умножен на multiplier.

Итоги

1. spread-оператор извлекает элементы массива,
2. rest-оператор собирает элементы (например, аргументы функции) в массив.

Спасибо за внимание

Перевод статьи “Spread VS Rest Operator”.