Зарегистрируйтесь, чтобы продолжить обучение

Оператор Spread (распаковка аргументов) JS: Функции

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-оператор используется при вызове функций. Он извлекает элементы из массива и заполняет ими параметры функции при вызове

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff