🧱 Суть
spread (...) в JavaScript позволяет создавать новый объект на основе существующего.
Пример:
const original = {
a: 1,
b: 2
};
const updated = {
...original,
b: 99
};Результат:
{
a: 1,
b: 99
}📦 Проблема
1. Нельзя безопасно менять объект напрямую
Например:
block.x = 100;При работе с React state это может нарушить обновление.
2. Нужно изменить только одно поле
Не хочется переписывать весь объект:
{
id,
title,
description,
x,
y
}ради изменения одного свойства.
✅ Решение
Создавать новый объект через spread:
const updated = {
...object,
changedField: newValue
};💻 Код
Обновление свойства:
const user = {
name: 'Alex',
age: 20
};
const updatedUser = {
...user,
age: 21
};Динамический ключ
Если имя свойства хранится в переменной:
const key = 'x';
const updatedBlock = {
...block,
[key]: 100
};Результат:
{
x: 100
}[key] превращается в название свойства.
Важное правило
При создании объекта последнее значение побеждает.
const original = {
a: 1
};
const updated = {
...original,
a: 10
};Результат:
{
a: 10
}Потому что a: 10 записан позже.
Обратный порядок:
const updated = {
a: 10,
...original
};Результат:
{
a: 1
}spread перезаписал значение.
Пример в React state
setBlock(prev => ({
...prev,
[axis]: value
}));Что происходит:
- создаётся копия старого объекта
- меняется только нужное поле
- React получает новый объект
🎯 Вывод
- spread создаёт новый объект, а не изменяет старый
{...obj, key: value}– стандартный способ обновления объектов[dynamicKey]позволяет менять свойства через переменную- последнее значение свойства всегда перезаписывает предыдущее
- это основной паттерн работы с React state