Spread и Rest
Оба используют синтаксис ..., но в разных контекстах делают противоположное.
Rest - сбор в массив
Используется в параметрах функции - собирает оставшиеся аргументы в массив.
function sum(...numbers) {
return numbers.reduce((acc, n) => acc + n, 0)
}
sum(1, 2, 3, 4) // 10
// Rest всегда должен быть последним параметром
function first(a, b, ...rest) {
console.log(a, b, rest)
}
first(1, 2, 3, 4, 5) // 1, 2, [3, 4, 5]
Spread - разворачивание итерируемого
Используется в вызовах функций, литералах массивов и объектов.
// Массивы
const a = [1, 2, 3]
const b = [4, 5, 6]
const merged = [...a, ...b] // [1, 2, 3, 4, 5, 6]
const copy = [...a] // поверхностная копия
// Функции
Math.max(...a) // 3
// Объекты (ES2018)
const defaults = { color: "blue", size: 10 }
const custom = { ...defaults, size: 20 } // { color: "blue", size: 20 }
Копирование - поверхностное!
const original = { a: 1, nested: { b: 2 } }
const copy = { ...original }
copy.a = 99 // не меняет original.a
copy.nested.b = 99 // ❌ меняет original.nested.b - это та же ссылка
// Глубокая копия:
const deep = structuredClone(original) // современный способ