1

can someone explain the reason for the behavior below?

In scenario 1 if I alter an element of the shallow copy of the array, the original array is affected.

In scenario 2 if I alter the shallow copy of the array directly by just assigning an empty array to it, it doesn't affect the original array.

What am I missing here? All I want is scenario1 to NOT alter the original array. Cant' really find an answer on this... 

//scenario 1
var peopleOriginal =[
  {name: 'alex', age:999 }
]
var peopleCopy = peopleOriginal.slice()
var updatedPerson = peopleCopy[0];
updatedPerson.name = 'bob';

console.log(peopleOriginal) // {name: 'bob', age:999 }

// scenario 2
var peopleOriginal2 =[
  {name: 'alex', age:999 }
]
var peopleCopy2 = peopleOriginal2.slice()
peopleCopy2 = []

console.log(peopleOriginal2) // {name: 'alex', age:999 }
alexr101
  • 588
  • 5
  • 13
  • Perhaps related: https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language – alephtwo Apr 05 '18 at 16:59
  • Duplicate of https://stackoverflow.com/questions/597588/how-do-you-clone-an-array-of-objects-in-javascript – Felix Gaebler Apr 05 '18 at 17:02
  • As you said in scenario1 you're performing a shallow copy (not a deep copy) of the array, that means that you're cloning only the array itself, not the contained objects, when you refer to the first element of the array peopleCopy[0] you're still pointing at the same instance in memory of peopleOriginal[0]. – Karim Apr 05 '18 at 17:05
  • Thanks Karim, didn't pay much attention to the "shallow" part. That answers my question, I'll try to find out how to make a deep copy. – alexr101 Apr 05 '18 at 17:06
  • Also **[see my post on this topic](https://stackoverflow.com/questions/42045586/whats-the-difference-between-a-boolean-as-primitive-and-a-boolean-as-property-o/42045636#42045636)**, which I forgot I made and, I think, explains this clearly. – Scott Marcus Apr 05 '18 at 17:06
  • `let peopleCopy = _.cloneDeep(peopleOriginal );` will clone your element using Lodash, along with all the objects nested inside. – Jorjon Apr 05 '18 at 17:07
  • Try this: `var peopleCopy = JSON.parse(JSON.stringify( peopleOriginal ))` – palaѕн Apr 05 '18 at 17:07
  • @alexr101 Doesn't matter if it's a shallow or deep copy. An object reference is still an object reference. – Scott Marcus Apr 05 '18 at 17:08
  • @ScottMarcus just read your post. hmmm, interesting so does Js not offer a way to create a copy of an obj? It's always a reference? – alexr101 Apr 05 '18 at 17:12
  • 1
    @alexr101 [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) can do much of the work, but depending on how the original object is set up, it may not make a perfect copy. – Scott Marcus Apr 05 '18 at 17:13
  • @palaѕн I don't think `JSON.stringify()` will include any inherited members and it definitely won't include methods. – Scott Marcus Apr 05 '18 at 17:17
  • @ScottMarcus That's a huge help. Apperciate it! – alexr101 Apr 05 '18 at 17:17

0 Answers0