-3

So I tried a simple example: 

  const original = [
     {id: 0, color: "red"},
     {id: 1, color: "blue"}
      ]
  const copy = [...original]

  copy[0] = {id:2, color:"red"}
  copy[1].id = 2
  console.log(original)
  console.log(copy)

Results I am getting are confusing:

   Array [Object { id: 0, color: "red" }, Object { id: 2, color: "blue" }]
   Array [Object { id: 2, color: "red" }, Object { id: 2, color: "blue" }]

When I change the entire object, the change only happens in the copy array.

So why did copy[1].id = 2 actually also changed the original array and not only a key in the copy array??

dwjohnston
  • 11,163
  • 32
  • 99
  • 194
MichaelK
  • 31
  • 4
  • `[...array]` creates a new array that wraps the original objects. So the containing array reference is unique from the original, but the objects in the array are the original objects – mhodges Dec 06 '18 at 22:54
  • First thing: it *looks* like something that'd be called an "operator", but it is not an operator. – Pointy Dec 06 '18 at 22:54
  • 1
    Spread is only a *shallow* copy. It's a new array of references to the same old objects. – jonrsharpe Dec 06 '18 at 22:54
  • Because there is no deep copy happening, only copy of the array contents. So the objects are the same inside the arrays. – Sami Kuhmonen Dec 06 '18 at 22:54
  • 1
    Also what is `array` here? Is that supposed to be `original`? – Pointy Dec 06 '18 at 22:54
  • So is there another way to copy the array and the objects inside, so I can change only the key value inside an object, without changing the original array? – MichaelK Dec 06 '18 at 23:01

1 Answers1

0

The answer to this question depends wholey on what you mean by copy. As copy can be shallow, deep, and everything in between. If you simply want to make a new array with a shallow clone of your objects, you can use map with spread. For example:

const copy = original.map(item => ({ ...item }))
Matt Way
  • 32,319
  • 10
  • 79
  • 85
  • 1
    While this answer provides a way to get a "deep" copy (albeit only 1 layer deep) of objects in an array, I don't think that is what the OP was asking about. They were asking "why if I say `copy[i] = "foo"` does that not change the original array, but if they say `copy[i].id = "foo"` that **does** change the original array – mhodges Dec 06 '18 at 23:08
  • If you read their most recent comment they say, 'is there another way to copy the array and the objects inside, so I can change only the key value inside an object, without changing the original array?', Also I think this is still shallow. Deep usually refers to complete depth. – Matt Way Dec 06 '18 at 23:10
  • 1
    thanks Matt Way, it helped me a lot, now it works the way I wanted it to. – MichaelK Dec 06 '18 at 23:11
  • 1
    @MattWay Ah, didn't see their most recent comment - I hadn't refreshed. Good to know this worked for what the OP was needing. – mhodges Dec 06 '18 at 23:16
  • You can refer this blog for rest / spread operator - https://tejassavaliya.medium.com/es6-use-of-spread-rest-operator-in-javascript-f13b061b522f – Tejas Savaliya Oct 29 '20 at 17:25