Why when I change copy of object in TS, original one also changes?

Question

I'm importing redux store and using the spread operator to create a copy of store property. Then when I change this copy, the original property also changes.

When I use copy = JSON.parse(JSON.stringify(original)) everything works fine.

export const move = (moveData: IMove): BoardActionTypes => {
  const { board } = store.getState();
  console.log(board.pieces.byId["19"]); // {row: 3, col: 7}

  const newById: IPiecesById = { ...board.pieces.byId };

  newById["19"].col = 4;
  newById["19"].row = 4;

  console.log(board.pieces.byId["19"]); // {row: 4, col: 4}
  console.log(newById["19"]); // {row: 4, col: 4}

  //...
};

score 2 · Accepted Answer · answered Jun 05 '19 at 09:28

Your issue is about shallow VS deep copy of an object.

When using spread operator, your creating a shallow copy of an object (Just like when using old-school Object.assign).

When you've used JSON parsing - you get a deep copy (or a "deep clone") of the object.

Shallow copy, as the name suggest, means that the outer object is a new one, while nested objects remains the same. Once you get to know redux in-depth, speard operators should be suffice for most cases, but it is an important difference to keep in mind.

You might want to read my question on this matter, and this article as well,.

score 0 · Answer 2 · answered Jun 05 '19 at 09:24

I have 2 options for it.

1. Using underscore.js

var foo = { row: 0, col:0 };
var bar = _.clone(foo);
bar.row = 99;

console.log(foo);
console.log(bar);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js"></script>

2. vanilla JS

function clone(obj) {
  if (obj === null || typeof(obj) !== 'object')
  return obj;

  var copy = obj.constructor();

  for (var attr in obj) {
    if (obj.hasOwnProperty(attr)) {
      copy[attr] = obj[attr];
    }
  }

  return copy;
}

var foo = { row: 0, col: 0 };
var bar = clone(foo);
bar.row = 99;

console.log(foo);
console.log(bar);

score 0 · Answer 3 · answered Jun 05 '19 at 09:48

What happens to you is - two objects with the same reference.

If you don't want to use an external lib, or a helper function (if you're not going to use it extensively), you can use something like this:

const newById = board.pieces.byId.map((item) => ({ ...item }));

(i assumed byId is an array, and map creates new array)

Why when I change copy of object in TS, original one also changes?

3 Answers3