Вебсправочник
Справочник JavaScript

Оператор spread: копирование и объединение

Как создавать новые массивы и объекты и помнить о поверхностном копировании.

Основная идея

Запись … разворачивает элементы или свойства в подходящем контексте. Она удобна для добавления пункта к новому массиву и обновления части объекта без переназначения всех полей вручную.

При объединении объектов более позднее свойство заменяет раннее с тем же именем. Копирование остаётся поверхностным: вложенный объект будет общим, пока вы не создадите отдельную копию и для него. Не путайте создание новой оболочки с независимым клонированием всего дерева.

Пример JavaScript

const original = { title: "HTML", settings: { theme: "light" } };
const updated = { ...original, title: "CSS" };
const list = ["HTML", "CSS"];
const extended = [...list, "JavaScript"];
console.log(updated.title, original.title, extended.length);

Название новой оболочки изменилось, исходное простое поле сохранилось, а новый массив содержит три элемента.

Частая ошибка

Изменение updated.settings.theme затронет общий вложенный объект. Не используйте поверхностную копию как гарантию изоляции сложного состояния.

Самостоятельная проверка

Измените вложенную настройку и объясните результат. Затем создайте отдельную копию settings и повторите проверку.

Код здесь показан для изучения. Встроенная песочница сайта выполняет только HTML/CSS. JavaScript проверяйте в собственном учебном файле или консоли своего тестового проекта; не вставляйте непонятный код на страницах с личными данными.

Следующие темы: массивы, объекты.

Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.