Почему d[0] не изменяется?

Question

[fleshik]

Подскажите почему в примере

const a  =[{x:1}] 
const b = [...a] 

a[0].x =500; 
console.log(a[0]) 
console.log(b[0])

в консоли выводится в обоих случаях {x: 500},

но в примере

const c = [{x:1}]  
const d = [...c] 

c[0]=100;  
console.log(c[0])  
console.log(d[0])
console.log(d[0])

мы получаем {x:1}, а не 100, почему так происходит ? Почему при изменении c[0] у нас не изменяется d[0]?

Comments

[Петр]

у вас "a" это набор обьектов. И новый массив обектами заполняете.
Тут a[0].x =500; меняете значение свойства обьекта,
а c[0]=100; перезаписываете ячейку массива значением 100, вместо обьекта что там находился

[Вадим]

Ну Вы же видите разницу между a[0].x и c[0]? Ну или давайте ещё более упростим. Разницу между a[0].x и a[0] видите? А если видите - понимаете?
Можете объяснить чем a[0].x отличается от a[0]?
Что такое a[0] а что такое a[0].x?

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

[fleshik]

Вадим, про ссылочные данные знаю и как работает пример с a[0].x тоже понимаю , но вот как работает пример с [0] почему там не меняется значение никак не пойму

Answer 1

[Rsa97]

Объекты в JS копируются по ссылке. Таким образом, при декомпозиции массива c в d вы копируете ссылку на объект. В результате c[0] и d[0] содержат ссылку на один и тот же объект { x: 1 }.
Когда вы меняете свойство x, то изменения проводятся в экземпляре объекта по ссылке. При этом в массивах по прежнему находится одна и та же ссылка.
Когда вы меняете значение элемента массива c[0], то в массиве c находится новое значение, а в массиве d по прежнему хранится ссылка на объект.
Да, и массивы здесь не при чём. То же самое можно продемонстрировать и с обычными переменными:

a = { x: 1 };
b = a;
b.x = 100;
a; \\ { x: 100 }
b; \\ { x: 100 }
b = 100;
a; \\ { x: 100 }
b; \\ 100

Вот вам ещё пример ссылок:

a = { x: 1 };
b = a;
c = { x: 1 };
a === b; // true
a === c; // false

Answer 2

[Вадим]

Дак а чего вдруг ему меняться то?
Давайте по шагам:

// В первой строчке 3 шага
// 1) Создался новый массив
// 2) Создался новый объект {x:1}, и ссылка на него легла в первый элемент массива из шага 1.
// 3) В переменную "const c" положилась ссылка на массив из шага 1.
const c = [{x:1}]
// Вторая строчка так же содержит 3 шага
// 4) Создаётся новый массив
// 5) По ссылке массив "с" спрэдится. Т.о. первым элементом нового массива становится ссылка на объект из шага 2.
// 6) Ссылка на новый массив но со "старым" объектом кладётся в переменную "d"
const d = [...c] 
// Третья упрощённо имеет 1 шаг
// 7) в массив из переменной с именем "c" в первый элемент кладётся новое значение. Причём совершенно не важно какое.
c[0]=100;

На этом всё.
Таким образом получаем, что в массиве c в элементе с индексом 0 у нас число, а в массиве b в элементе с индексом 0 у нас ссылка на объект созданный на втором шаге.