Александр Дудукало, Автор в Академия Selectel

Что такое оператор rest в JavaScript Сперва рассмотрим простой пример. У нас есть функция, которая складывает числа: Она отлично справляется с задачей: на вход принимает два числа и на выходе отдает сумму. Но предположим, что мы хотим сделать так, чтобы функция принимала неограниченное количество чисел. Как это реализовать?Скорее всего, вы подумаете о массиве: Rest — это синтаксис в JavaScript, который позволяет собирать неограниченное количество аргументов функции и свойств объекта в массив (или объект). Если сказать проще, то rest берет все, что осталось, и объединяет. Используют оператор с помощью трех точек «…». В примере выше ...numbers превращает все переданные аргументы в массив, то есть в параметр собираются все оставшиеся аргументы. Если вызвать sum(1, 2, 3), то внутри функции numbers будет . Если вызвать sum(10, 20), то numbers будет . Если вызвать без аргументов — . А если у функции должны быть и другие параметры, помимо тех, что собираются в массив? Все просто, сначала прописываем параметры, которые не войдут в объединенный массив, а остальные «соберет» rest: Результат в консоли. Здесь первый prefix становится отдельным параметром, а все остальные аргументы попадают в массив …names. Rest с массивами Rest можно применять не только в функциях, но и в работе с массивами: Пример в консоли. Здесь rest собрал все остатки массива после первых двух элементов. Кстати, в этом примере также используется деструктуризация — о ней я рассказал в предыдущей статье. Rest в объектах С массивами разобрались. Теперь узнаем, можно ли применять rest с объектами. Смотрим пример: Пример в консоли. Здесь добавили name в отдельную константу, а все остальное — в объект other. В некоторых случаях этот прием тоже будет полезным. Что такое оператор spread в JavaScript Вы уже знаете, что rest собирает элементы вместе, но есть и обратная операция — «разбор» элементов с помощью spread. Смотрим пример: Пример в консоли. Все те же три точки, но в другом контексте. Оператор объединяет два массива с помощью одной строки. Конечно, это можно сделать с помощью встроенного метода — об этом расскажу в следующих статьях — или цикла, но посмотрите, как просто и лаконично выглядит код уже сейчас. Spread — это синтаксис в JavaScript, который позволяет разобрать массив или объект на отдельные элементы. Его также используют с помощью трех точек «...» — он как rest, только работает наоборот. Если сказать проще, то spread убирает квадратные или фигурные {} скобки. Функция позволяет выполнять нужные манипуляции со вложенными элементами. Рассмотрим, как еще можно использовать spread. Копирование массива Как просто скопировать элементы массива в другой массив: Результат в консоли. Копирование — это уже отдельная тема для статьи. В этой операции многое зависит от того, что именно вы копируете и чего хотите достичь. Не будем останавливаться на этом. Ниже расскажу о том, что такое мутабельность и ссылки. Работа с объектами Результат в консоли. Вышло красиво и просто, согласитесь? Передача аргументов в функцию Помните функцию sum из примера в начале статьи. Как быть, если мы захотим передать в нее массив? Сможет ли функция использовать rest и принимать неограниченное количество параметров? На помощь приходит spread: Вот так, все просто. Оператор разбирает массив из набора и затем опять собирает. Конечно, пример абсолютно надуманный, но поверьте, в практике такая реализация имеет место быть. Заключение Операторы rest и spread в JavaScript — это два приема с одинаковым синтаксисом «...», но противоположным действием. Rest собирает оставшиеся значения в массив или объект — удобно для функций, массивов и объектов. Spread, наоборот, раскрывает коллекцию на отдельные элементы — подходит для объединения, копирования и передачи аргументов. Вместе они делают код более компактным и читаемым.