Операції spread і rest

Spread

Оператор spread використовують для розширення, розпакування чи копіювання значень масивів, об'єктів або інших ітерабельних об'єктів в нові структури даних. Його синтаксис - це три крапки ... перед структурою, яку потрібно "розпорошити".

Операція spread для масивів

За допомогою ... (три крапки) можна "розпорошити" елементи масиву.

let array1 = [1, 2, 3];
let array2 = [...array1, 4, 5, 6];

console.log(array2); // Виведе: [1, 2, 3, 4, 5, 6]

Тобто ця операція розклала array1 на його складові елементи і вставила в нову структуру array2 у вказане місце (не обовʼязково напочатку).

До введення в стандарт цієї операції використовувати методи slice() і concat().

Операція spread для об'єктів

Так само, за допомогою ... (три крапки) можна "розпорошити" властивості об'єкту.

let object1 = { a: 1, b: 2 };
let object2 = { ...object1, c: 3, d: 4 };

console.log(object2); // Виведе: { а: 1, b: 2, с: 3, d: 4 }

Якщо розпорошувати обʼєкти і будуть властивості з одноковою назвою, то буде перезаписана і застосована остання вказана властивість. Цей підхід часто використовують на практиці.

let object1 = { a: 1, b: 2 };
let object2 = { c: 3, d: 4 };
let object3 = { a: 5, c: 6 };

let object4 = { ...object1, ...object2, ...object3 };
console.log(object4); // Виведе: {a: 5, b: 2, c: 6, d: 4}

let object5 = { ...object3, ...object2, ...object1 };
console.log(object5); // Виведе: {a: 1, b: 2, c: 3, d: 4}

Передача аргументів функції

Spread також можна використовувати для передачі аргументів у функцію.

function summ(a, b, c) {
  return a + b + c;
}

let numbers = [1, 2, 3];
let result = summ(...numbers);

console.log(result); // Виведе: 6

У прикладі "розпорошується" масив у переданих аргументах функції - кожен елемент це окремий аргумент. тобто summ(...[1, 2, 3]) це те ж саме, що і summ(1, 2, 3).

Rest

Оператор rest використовують для збору аргументів в масив або збору лишніх аргументів в функцію у вигляді масиву.

Використання rest для збору аргументів функції в масив

function myFunc(a, b, ...elseArgs) {
  console.log(a); // Виведе: 1
  console.log(b); // Виведе: 2
  console.log(elseArgs); // Виведе: [3, 4, 5]
}

myFunc(1, 2, 3, 4, 5);

У цьому прикладі ...elseArgs збирає всі аргументи, що залишилися після a і b, в масив elseArgs. Тобто операція rest збирає решту усіх аргументів, а тому повинна бути останньою у підписі функції, інакше виникне помилка.

Можна винести всі аргументи в масив.

function myFunc(...args) {
  console.log(args); // масив усіх аргументів
}

myFunc(1, 2, 3);
myFunc(1, 2, 3, 4);

Ім'я параметра може бути будь-яким. Найчастіше його називають args, restArgs або otherArgs - скорочено від arguments.

Операція ... (rest) збирає групу незалежних елементів у нову колекцію.

Операція ... (spread) розділяє колекцію на незалежні елементи.

Синтаксис однаковий, але відрізнити їх просто:

spread - коли ... розташовані у правій частині операції присвоювання

rest - коли ... розташовані в лівій частині присвоєння.