Для чего используются операторы spread и rest в JavaScript?

Оператор spread (...) используется для "расширения" итерируемых объектов (таких как массивы или строки) в места, где ожидается ноль или более аргументов (при вызове функций) или элементов (при создании массивов). Также он применяется для объединения свойств объектов в новый объект.

// Использование spread в вызове функции
const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3

// Использование spread для объединения массивов
const arr1 = [1, 2];
const arr2 = [3, 4];
const combinedArr = [...arr1, ...arr2]; // [1, 2, 3, 4]

// Использование spread для объединения объектов
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

Оператор rest (...) используется в синтаксисе параметров функции для сбора всех оставшихся аргументов в массив. Это позволяет функции получать неопределенное количество аргументов. Он также применяется при деструктуризации массива или объекта для сбора остальных элементов или свойств.

// Использование rest в параметрах функции
function sum(...args) {
  // args теперь массив [1, 2, 3]
  return args.reduce((total, current) => total + current, 0);
}
console.log(sum(1, 2, 3)); // 6

// Использование rest при деструктуризации массива
const [first, second, ...restOfArray] = [1, 2, 3, 4, 5];
// first = 1, second = 2, restOfArray = [3, 4, 5]

// Использование rest при деструктуризации объекта
const { a, b, ...restOfObject } = { a: 1, b: 2, c: 3, d: 4 };
// a = 1, b = 2, restOfObject = { c: 3, d: 4 }

Основное различие:

• Spread "расширяет" элементы или свойства.
• Rest "собирает" элементы или свойства в массив/объект.