Delete a object's key also deletes key in the other object - Javascript

user_4388566 0
Viewed 44

I have found myself in a peculiar problem with Javascript. I am trying to maintain a form of state object/ dictionary (dict1) and a final object/ dictionary(dict2) which I have to post.

I assign the object dict1 to my object dict2 when clicking on some buttons. What I want to do is delete the key in dict2 but the behavior is peculiar as it also deletes the key from the dict1. Below is my code:

dict1 = {
    123:{
    456:2
  }
}

dict2 = {}

dict2[123] = dict1[123]


delete dict2[123][456]


console.log(dict1)

// It logs {123 : {} } whereas the dict1 shouldn't change

It seems like the objects are shallow copying somehow.

object dictionary json javascript
1 Answers

Use the spread operator (...) to create a "duplicate" of the object so that you aren't modifying the original.

Originally, you were copying the reference stored in dict1[123] to dict2[123]. This means that both dict properties point to the same object and that modifications made from one dict can be seen from the other. By using the spread operator, you are adding all the contents of an object to a new one. This means that dict1[123] and dict2[123] will store 2 different references that contain the same data, and you can modify them independently.

Read more about the spread operator here.

dict1 = {
  123:{
    456:2
  }
}

dict2 = {}

dict2[123] = {...dict1[123]}

delete dict2[123][456]

console.log(dict1)
console.log(dict2)

user_107961720
Related