Оператор spread в JavaScript

В ES6 появился специальный оператор ..., называющийся spread.

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

Наверняка звучит непонятно, поэтому давайте посмотрим на простом примере. Пусть у нас есть функция, принимающая 3 параметра и возвращающая их сумму:

function func(num1, num2, num3) {
	return num1 + num2 + num3;
}

Пусть у нас также есть массив из трех элементов:

let arr = [1, 2, 3];

Очевидно, что мы не можем просто взять и передать этот массив параметром функции, вот так:

let arr = [1, 2, 3];
func(arr);

Ведь в этом случае весь массив попадет в первый параметр функции, а в этот параметр необходимо передавать число (да и в остальные параметры тоже).

Конечно же, можно поступить следующим образом:

let arr = [1, 2, 3];
func(arr[0], arr[1], arr[2]);

Но есть и более простой путь - использовать оператор spread:

let arr = [1, 2, 3];
func(...arr);

Наличие переменной не является обязательным - можно применять spread прямо к массиву:

func(...[1, 2, 3]);

Дан массив:

let arr = [1, 2, 3, 4, 5];

Дана также функция:

function func(num1, num2, num3, num4, num5) {
	return num1 + num2 + num3 + num4 + num5;
}

Найдите с помощью приведенной функции сумму элементов массива.

Более сложные примеры

Пусть у нас есть вот такая функция с 5-тью параметрами:

function func(num1, num2, num3, num4, num5) {
	return num1 + num2 + num3 + num4 + num5;
}

Мы можем с помощью spread передать в эту функцию один массив:

func(...[1, 2, 3, 4, 5]);

Но это не обязательно!

Можно передать два массива:

func(...[1, 2], ...[3, 4, 5]);

Можно передать часть параметров обычным способом, а часть - с помощью spread:

func(1, 2, ...[3, 4, 5]);

Или вот так:

func(1, ...[2, 3, 4], 5);

Не запуская код, определите, что выведется в консоль:

function func(n1, n2, n3, n4, n5, n6, n7, n8) {
	return (n1 + n2 + n3 + n4) * (n5 + n6 + n7 + n8);
}

console.log( func(1, ...[2, 3, 4], 5, ...[6], ...[7, 8]) );

Более полезное применение

Наверняка предыдущие примеры применения оператора spread кажутся вам не очень вдохновляющими.

Давайте сделаем что-нибудь более впечатляющее. Посмотрите на следующий код:

let max = Math.max(1, 2, 3, 4, 5);

Как вы видите, в этом коде находится максимальное из чисел. Но что делать, если наши числа представлены в виде массива? Например, вот так:

let arr = [1, 2, 3, 4, 5];

Мы, увы, не можем сделать следующее:

let arr = [1, 2, 3, 4, 5];
let max = Math.max(arr); // здесь нельзя передавать массив

Конечно же, мы можем вручную проставить элементы массива в Math.max, вот так:

let arr = [1, 2, 3, 4, 5];
let max = Math.max(arr[0], arr[1], arr[2], arr[3], arr[4]);

Однако, в этом случае теряется всякая универсальность: наш код будет находить максимальное значение лишь для массива из 5 элементов.

А что, если нам понадобится больше или меньше элементов в массиве? Решение есть! Используем оператор spread:

let arr = [1, 2, 3, 4, 5]
let max = Math.max(...arr);

Данный код, не смотря на его простоту, очень мощный. Ведь Math.max может принимать любое количество параметров, а значит с помощью оператора spread мы можем использовать массив произвольного размера!

Дан массив с числами. Используя Math.min и spread выведите на экран минимальное значение массива.