Spread-оператор (...) — мощный инструмент, но его поведение с undefined и null может сломать мозг.
Посмотрите на эти примеры:
console.log('fun', ((...undefined) => {})()); // ✅ fun []
console.log('obj', { ...undefined, ...null }); // ✅ obj {}
console.log('arr', [ ...undefined ]); // ❌ TypeError!
Что здесь происходит?
- В функциях (...undefined как rest-параметр)
– Здесь ...undefined — это корректный синтаксис для пустого списка аргументов.
– Результат — пустой массив [], потому что ничего не передано.
- В объектах ({ ...undefined })
– Spread игнорирует undefined и null, как будто их нет.
– Это поведение специально — чтобы избежать лишних проверок.
- В массивах ([ ...undefined ])
– Здесь нужен итерируемый объект, а undefined им не является → TypeError.
– В отличие от объектов, массивы не терпят undefined в spread-операторе.
Как защититься?
Паттерны для безопасного использования:
// Для массивов: подменяем undefined на пустой массив
const safeArray = [...(possiblyUndefined || [])];
// Для объектов: подменяем null/undefined на пустой объект
const safeObject = { ...(possiblyNull || {}) };
Почему так?
– Объекты: Spread работает через Object.assign(), который пропускает undefined/null.
– Массивы: Spread использует итераторы, а undefined не итерируется.
– Функции: Rest-параметры всегда создают массив, даже если аргументов нет.
Вывод
Spread-оператор — не магия, а чёткие правила:
- ✅ Объекты — молча глотают undefined.
- ❌ Массивы — требуют итерируемости.
- 🤷 Функции — превращают ...undefined в [].
Совет: Всегда подстраховывайтесь || [] или || {}, если значение может быть undefined!
📌 Если хотите больше таких разборов — в моём Telegram их не так много 😅. Зато есть кусочки кода, баги и мысли вслух.