Deleting a key from one object will also remove that key from another object - JavaScript

Question

Deleting a key from one object will also remove that key from another object - JavaScript

I have come across an interesting issue with my Javascript code. I am working with two objects, dict1 and dict2, where I need to maintain a form of state and then post the final object.

When I click on certain buttons, I assign dict1 to dict2. However, when I try to delete a key in dict2, it also removes the key from dict1, which is not what I intended. Below is my code snippet:

dict1 = {
    123:{
    456:2
  }
}

dict2 = {}

dict2[123] = dict1[123]


delete dict2[123][456]


console.log(dict1)

// It logs {123 : {} } whereas dict1 should remain unchanged

It appears that the objects are being shallow copied somehow.

javascript json dictionary object

Answer 1

Answer №1

To avoid modifying the original object, utilize the spread operator (...) to create a "duplicate."

Initially, when you copied the reference from dict1[123] to dict2[123], both dictionaries pointed to the same object. This meant changes in one dictionary reflected in the other. By using the spread operator, all contents are added to a new object. As a result, dict1[123] and dict2[123] hold different references with the same data, allowing for independent modifications.

Learn 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)

Answer 2

To avoid modifying the original object, utilize the spread operator (...) to create a "duplicate."

Initially, when you copied the reference from dict1[123] to dict2[123], both dictionaries pointed to the same object. This meant changes in one dictionary reflected in the other. By using the spread operator, all contents are added to a new object. As a result, dict1[123] and dict2[123] hold different references with the same data, allowing for independent modifications.

Learn 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)

Deleting a key from one object will also remove that key from another object - JavaScript

Answer №1

Similar questions

Adding an event listener to detect left or right mouse clicks - using onclick doesn't capture right clicks

Checking for equality between two JSON objects using Express JS

What is the best way to eliminate duplicate values within a v-for array?

Tips for adjusting image size to take up only half of the screen in NextJS

Creating an animated time-based scrollable bar chart in javascript

In Typescript, convert an object into a different type while maintaining its keys in the resulting type

Manipulate the color of the parent text using a button nested within

Ways to trigger the upgradeneeded event in IndexedDB without upgrading the version

Utilizing .isDisplayed() in conjunction with .each() in ProtractorJS for Angular: A guide

The performance of Google Maps API is compromised by a high number of markers,

Creating an object using JSON and implementing custom methods in Javascript

How to use PHP and JavaScript to update a location marker on Google Maps

Extracting Data from Multiple Pages Using Python 3 without Changing URL

Form validation displaying only the initial error message

JQuery computes the grand total without displaying it on the screen

What is the best way to exclude HTML tags from the innerHTML attribute?

How can I retrieve and store session information during the authorization event in Socket.io with express-sessions?

Is there a way in Bower to automatically select only CSS or JS files from an open source project, rather than both, if that is my preference?

What is the preferred method for accessing nested object properties in React props?

Why is it necessary for me to utilize JSONP?