Оператор spread в JS

В этой статье вы подробнее познакомитесь с оператором spread в JavaScript.

Оператор spread ... появился в версии ES6.

Оператор позволяет растягивать массивы. С его помощью обычно копируют или сливают массивы. Например, так:

const arrValue = ['Меня', 'зовут', 'Андрей', 'Карпов'];

console.log(arrValue);   // Вывод: ["Меня", "зовут", "Андрей", "Карпов"]
console.log(...arrValue); // Вывод: Меня зовут Андрей Карпов

Строчка console.log(...arrValue) в этом случае эквивалентна такой записи: console.log('Меня', 'зовут', 'Андрей', 'Карпов').

Копирование массива

Оператор spread ... позволяет копировать элементы в один массив. Например:

const arr1 = ['один', 'два'];
const arr2 = [...arr1, 'три', 'четыре', 'пять'];

console.log(arr2); 
//  Вывод: ["один", "два", "три", "четыре", "пять"]

Клонирование массива

В JavaScript объекты присваиваются и копируются по ссылке, а не по значениям. Например:

let arr1 = [ 1, 2, 3];
let arr2 = arr1;

console.log(arr1); // Вывод: [1, 2, 3]
console.log(arr2); // Вывод: [1, 2, 3]

// добавляем элемент в массив
arr1.push(4);

console.log(arr1); // Вывод: [1, 2, 3, 4]
console.log(arr2); // Вывод: [1, 2, 3, 4]

Обе переменные arr1 и arr2 ссылаются на один и тот же массив. То есть изменение одной переменной приводит к изменению обеих переменных.

Однако если вы хотите скопировать массивы так, чтобы они не ссылались на один и тот же массив, вы можете использовать оператор spread. Так изменения в одном массиве не отразятся на другом. Например:

let arr1 = [ 1, 2, 3];

// копируем с помощью оператора spread
let arr2 = [...arr1];

console.log(arr1); // Вывод: [1, 2, 3]
console.log(arr2); // Вывод: [1, 2, 3]

// добавляем элемент в массив
arr1.push(4);

console.log(arr1); // Вывод: [1, 2, 3, 4]
console.log(arr2); // Вывод: [1, 2, 3]

Оператор spread с объектами

Оператор spread точно так же работает и с объектами, только вместо элементов работает со свойствами. Например: 

const obj1 = { x : 1, y : 2 };
const obj2 = { z : 3 };

// добавляем свойства obj1 и obj2 в obj3
const obj3 = {...obj1, ...obj2};

console.log(obj3); // Вывод: {x: 1, y: 2, z: 3}

Как вы видите, все свойства объектов obj1 и obj2 стали свойствами объекта obj3.

Остаточные параметры

Когда оператор spread используется в качестве параметра, его называют остаточным параметром (rest parametr).

let func = function(...args) {
    console.log(args);
}

func(3); // Вывод: [3]
func(4, 5, 6); // Вывод: [4, 5, 6]

function sum(x, y ,z) {
    console.log(x + y + z);
}

const num1 = [1, 3, 4, 5];

sum(...num1); // Вывод: 8