В чем разница между оператором spread (...) и rest-параметрами?

Разница между оператором spread (...) и rest-параметрами

• Область применения: JavaScript, синтаксис функций и коллекций
• spread — раскрывает элементы массива или объекта, превращая их в аргументы либо свойства
• rest — объединяет несколько аргументов или свойств в массив либо объект
• spread используется при вызове функции или создании литерала
• rest применяется только в объявлении параметров функции либо при деструктуризации
• spread раскрывает содержимое, а rest его агрегирует
• пример spread: func(...arr) → элементы распаковываются при вызове
• пример rest: function(...args) → аргументы объединяются в одну группу
• главное различие связано с направлением передачи данных: spread расширяет, rest сворачивает
• практическая польза: spread удобен для передачи набора элементов, а rest — для обработки неизвестного количества аргументов или свойств

Это различие помогает управлять аргументами и создавать копии коллекций.

Развернутый ответ

Основной ответ

Хотя spread (...) и rest-параметры (...) записываются одинаково, назначение у них противоположное: spread извлекает элементы массива или свойства объекта и раскрывает их, тогда как rest собирает оставшиеся значения в массив или объект. Иными словами, spread означает расширение (spread out), а rest — объединение оставшихся элементов (rest parameters) в одну сущность.

Основные положения

• Оператор Spread нужен, чтобы раскрывать элементы массива или свойства объекта при вызове функции, а также во время создания нового массива или объекта. С его помощью, например, копируют массивы и передают функции сразу несколько аргументов.
• Rest задается при объявлении функций или выполнении деструктуризации и позволяет собрать оставшиеся значения после извлечения отдельных элементов. Это особенно полезно, когда количество аргументов заранее неизвестно.
• В JavaScript (ES6) spread используется при вызове функций и в литералах ([...arr], {...obj}), тогда как rest допускается только в параметрах функции или при деструктуризации (function(...args), const {a, ...rest} = obj).
• Например, в React spread часто применяют, чтобы передать компоненту props, а rest — чтобы отделить нужные свойства и объединить все остальные.

Практический контекст

В React 18 spread обычно используют для передачи компоненту всех пропсов <Button {...props} />. С помощью rest функция может принять первые несколько параметров, а оставшиеся объединить для последующей обработки:

function log(first, ...others) {
console.log(first, others);
}

Такой подход повышает гибкость и улучшает читаемость, одновременно сокращая объем кода при работе с переменным количеством аргументов. Поэтому оба оператора тесно связаны, но отличаются семантикой и условиями применения.