Теория: Оператор Spread (распаковка аргументов)

spread-оператор в вызовах функций синтаксически идентичен rest-оператору в определениях, но выполняет обратное действие. Посмотрим на примере функции sum():

const sum = (...numbers) => {
  let result = 0
  for (let num of numbers) {
    result += num
  }
  return result
}

Вызовем sum(), применив spread-оператор к массиву аргументов:

const numbers = [1, 7, 4]
sum(...numbers) // 12

spread-оператор раскладывает массив на аргументы. Количество аргументов, полученных spread-оператором, равно количеству элементов массива. По сути, код выше преобразуется в вызов:

sum(numbers[0], numbers[1], numbers[2])
// sum(1, 7, 4);

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

const numbers = [1, 7, 4]
sum(8, ...numbers) // 20

sum(8, 10, ...numbers) // 30
sum(8, 10, 70, ...numbers) // 100

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

const numbers = [1, 7, 4]

sum(8, 10, ...numbers) // 30
sum(8, ...numbers, 10) // 30
sum(...numbers, 8, 10) // 30

Более того, может быть любое количество spread-операторов и в любом порядке:

const numbers1 = [1, 7, 4]
const numbers2 = [5, 5]

// sum(1, 7, 4, 5, 5);
sum(...numbers1, ...numbers2) // 22

// sum(5, 5, 1, 7, 4);
sum(...numbers2, ...numbers1) // 22

// sum(8, 1, 7, 4, 10, 5, 5);
sum(8, ...numbers1, 10, ...numbers2) // 40

Итог

Оба оператора rest и spread обозначаются символами .... Чтобы их не путать при работе с функциями, нужно следовать следующим принципам:

• rest-оператор используется при создании функций. Он позволяет собрать остаточные параметры функции в массив
• spread-оператор используется при вызове функций. Он извлекает элементы из массива и заполняет ими параметры функции при вызове