Почему назначение с объектом в качестве ключа меняет объект в JavaScript

Question

Ссылка на JS bin

cosnt config = {a: {x: 1, y: 2, z: 3}, b: {x: 12, y: 23, z: 34}};

console.log(config);

// ->
// [object Object] {
//  a: [object Object] {
//    x: 1,
//    y: 2,
//    z: 3
//  },
//  b: [object Object] {
//    x: 12,
//    y: 23,
//    z: 34
//  }
// }

const items = [];
items.push(config['a']);

console.log(items);

// ->
// [[object Object] {
//  x: 1,
//  y: 2,
//  z: 3
// }]

items[items.length - 1].q = "mutation";

console.log(items);

// ->
// [[object Object] {
//  q: "mutation",
//  x: 1,
//  y: 2,
//  z: 3
// }]

console.log(config);

// ->
// [object Object] {
//  a: [object Object] {
//    q: "mutation",
//    x: 1,
//    y: 2,
//    z: 3
//  },
//  b: [object Object] {
//    x: 12,
//    y: 23,
//    z: 34
//  }
// }

console.log(config.a)

// ->
// [object Object] {
//  q: "mutation",
//  x: 1,
//  y: 2,
//  z: 3
// }

Я понимаю, что config.a обновляется, потому что items[0] является ссылкой на config.a

Тем не менееМне не имеет особого смысла, почему он спроектирован таким образом.

Я думаю о том, как лучше написать этот код, чтобы он не обновлялся config

Answer 1

Ссылка на JS bin

items = [
           ...items.slice(0, items.length - 1),
          {...items[items.length -1 ], q: "mutation"}
        ];

Это создаст новый объект, обновляющий ссылку.