CODEWITHSUNDEEP
javascript
Shreya B
Shreya B

Reputation: 326

Can a simple for loop in Javascript avoid mutation of array when copied

I have a code snippet as below

 let arr1 = [{status : true , name : "one"} , {status : false , name : "two"} , {status : true , name : "three"}]
    let arr2 = arr1.slice();

    for(let i=0; i<arr2.length ; i++){
      if(!arr2[i].status){
        arr2[i].status = true;
      }
    }

    console.log("arr1....." , arr1);
    console.log("arr2......",arr2)

In this case both arr1 and arr2 are modified. My expected result is just to update arr2 and not arr1 (only using a simple for loop)

How can I achieve this?

Upvotes: 1

Views: 690

Answers (3)

Tuba Polat
Tuba Polat

Reputation: 41

Objects inside arrays point same references, so if you update an object in arr2 it will update same object in arr1. So you have 2 options,

  1. Deep copy arr1 while assigning arr2 (deep copy means copy even objects inside, may run slower)

let arr1 = [{status : true , name : "one"} , {status : false , name : "two"} , {status : true , name : "three"}]
let arr2 = JSON.parse(JSON.stringify(arr1));

for(let i=0; i<arr2.length ; i++){
  if(!arr2[i].status){
    arr2[i].status = !arr2[i].status;
  }
}

console.log("arr1....." , arr1);
console.log("arr2......",arr2)

2. Copy object(you would like to change), add changed field as below

let arr1 = [{status : true , name : "one"} , {status : false , name : "two"} , {status : true , name : "three"}]
let arr2 = [...arr1];

for(let i=0; i<arr2.length ; i++){
  if(!arr2[i].status){
    arr2[i] = {...arr2[i], status:!arr2[i].status};
  }
}

console.log("arr1....." , arr1);
console.log("arr2......",arr2)

Upvotes: 4

James
James

Reputation: 2787

How about change a way to copy the array?

To explain why slice() will make both of them updated, that is because because the array.slice() also copy the reference of the orginial array.

So, whenever the original array changed, the copied array also changed

let arr1 = [{status : true , name : "one"} , {status : false , name : "two"} , {status : true , name : "three"}]
    const arr2 = JSON.parse(JSON.stringify(arr1));

    for(let i=0; i<arr2.length ; i++){
      if(!arr2[i].status){
        arr2[i].status = true;
      }
    }

    console.log("arr1....." , arr1);
    console.log("arr2......",arr2)

Upvotes: 1

Cooper Marshall
Cooper Marshall

Reputation: 11

You are creating a new array but the objects inside it are still referencing the original ones. You need to create new references for these objects. Use the following instead of let arr2 = arr1.slice(); This would be the "Deep Copy" approach that @Tuba Polat mentioned.

let arr2 = arr1.map(oldObj => { return { ...oldObj } })

Upvotes: 0

Related Questions