В JavaScript rest и spread операторы имеют одинаковый синтаксис - ..., но при этом выполняют разные функции. Так чем же они отличаются?

Rest

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

Так rest позволяет функции принимать неопределенное количество аргументов в виде массива:

function sum(...args){
  let total = 0
  args.forEach(item=>total+=item)
  return total
}

console.log(total(1,2)); //3
console.log(total(1,2,3)); //6
console.log(total(1,2,3,4)); //10

С помощью rest, выполнив деструктуризацию, все однотипные элементы можно представить в одном массиве:

let order = ['John Doe', 1001, 4, 7, 12, 33];
let [name, id, ...items_id] = order;
console.log(name); // Pepperoni
console.log(id); // 2222
console.log(items_id); // [ 4, 7, 12, 33 ]

Spread

spread оператор или, другими словами, оператор расширения извлекает каждый элемент итерируемого объекта и погружает его в другой итерируемый объект.

К итерируемым объектам можно отнести все сущности, которые можно перебрать с помощью цикла. Обычно, в JavaScript это массивы и строки.

spread, например, позволяет перебрать элементы массива:

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

или объединить два массива:

let numberStore = [1, 2];
let newNumber = [3, 4];
numberStore = [...numberStore, ...newNumber];
console.log(numberStore) // 1,2,3,4]

Спасибо за внимание.