Переменная определена зарезервированным словом const

Question

Почему следующий ниже фрагмент кода дает такой результат? переменные типа CONST не могли изменить свое значение, верно?

const theDog = {
  name: 'Totó',
  guardian: { name: 'Alan Turing' }
}
const otherDog = { ...theDog, name: 'Tulipa' }
otherDog.guardian.name = 'Maria Luiza'

theDog? { name: 'Totó', guardian: { name: 'Maria Luiza' } }

Answer 1

Итак, сначала вы объявляете одну переменную theDog, а вторая - просто ссылка на первую. Когда вы редактируете второй, вы редактируете первый.

Если вы этого не хотите, вы можете использовать

const resultObject = Object.assign({}, theDog);

, чтобы клонировать его.

Answer 2

Значение объекта нельзя изменить, но его свойства можно изменить. Чтобы избежать этой проблемы, можно использовать синтаксис распространения объекта в свойстве guardian.

const theDog = {
 name: 'Totó',
 guardian: { name: 'Alan Turing' }
}
const otherDog = { ...theDog, guardian: {...theDog.guardian}, name: 'Tulipa' }
otherDog.guardian.name = 'Maria Luiza'
console.log(theDog);

Answer 3

Проблема в том, что объект копируется с включенными его внутренними ссылками, это theDog.guardian и otherDog.guardian относятся к одному и тому же объекту.

Решением будет рекурсивное клонирование всего объекта:

const theDog = {
 name: 'Totó',
 guardian: { name: 'Alan Turing' }
}
const otherDog = Object.assign({}, theDog, {
    name: 'Tulipa'
});
otherDog.guardian.name = 'Maria Luiza'

Также const указывает только, что переменная не может быть изменена, а не объекты, на которые есть ссылки