Modifying JavaScript object values using the Object() constructor

Question

Modifying JavaScript object values using the Object() constructor

My background is in Groovy, which has similar syntax to JavaScript. In Groovy, I can easily copy values from one map to another like this:

def myMap1 = {};
def myMap2 = {};

myMap1["key1"] = "value1";
myMap1["key2"] = "value2";
myMap1["key3"] = "value3";

myMap1.each() { key, value =>
    myMap2[key] = value;
}

However, dealing with prototypes in JS has been challenging for me. It seems like accessing key/value pairs without prototyping is possible using Object(), but when trying to update data, I encountered the following issue:

var existingData = {"foo":"thing","bar":"otherThing","baz":"whatever"};
var update = {"foo":"newStuff","bar":"thisChanged","baz":"arghh"};

for (const [ key, value ] of Object.entries(update)) {
    console.log("Old value is " + existingData[key]);
    existingData[key] = value;
    console.log("Setting " + existingData[key] + " to " + value);
}

I expected this code to work, but it resulted in undefined values being displayed in the console. It seems that existingData[key] is not referencing the key correctly. How can I fix this and update the values based on the keys in the second object?

javascript arrays ecmascript-6 javascript-objects

Answer 1

Answer №1

for (const property in object1) {
    object2[property] = object1[property];
}

By the way, have you ever considered using Object.assign()? It actually creates a new object instead of modifying existing ones.

let updateValues = { "property1": "value1", "property2": "value2" };
let updatedObject = Object.assign({}, originalObject, updateValues);

Click here to learn more about Object.assign()

Answer 2

for (const property in object1) {
    object2[property] = object1[property];
}

By the way, have you ever considered using Object.assign()? It actually creates a new object instead of modifying existing ones.

let updateValues = { "property1": "value1", "property2": "value2" };
let updatedObject = Object.assign({}, originalObject, updateValues);

Click here to learn more about Object.assign()

Answer 3

Answer №2

One way to update map2 with the key/value pairs from map1 is by using Object.assign(map2, map1).

Another option is to create a new object by combining the contents of both maps like so: map2 = {...map2, ...map1}, which will completely replace map2.

If you need a deep copy instead of just shallow copying, you can use JSON.parse(JSON.stringify(map2)) instead of simply assigning map2. If performance is a concern due to the size of the object, consider implementing a nested recursive copy method for deep copying!

Answer 4

One way to update map2 with the key/value pairs from map1 is by using Object.assign(map2, map1).

Another option is to create a new object by combining the contents of both maps like so: map2 = {...map2, ...map1}, which will completely replace map2.

If you need a deep copy instead of just shallow copying, you can use JSON.parse(JSON.stringify(map2)) instead of simply assigning map2. If performance is a concern due to the size of the object, consider implementing a nested recursive copy method for deep copying!

Answer 5

Answer №3

To duplicate an object by looping through an array of keys, you can follow this approach:

let myMap1 = {};
let myMap2 = {};

myMap1["key1"] = "value1";
myMap1["key2"] = "value2";
myMap1["key3"] = "value3";

// create an array of the keys in myMap1
let myMap1_keys = Object.keys(myMap1);

// loop through the array of keys
for (let i = 0; i < myMap1_keys.length; i++) {
  myMap2[myMap1_keys[i]] = myMap1[myMap1_keys[i]];
}

It is recommended to avoid using a for..in loop for performance reasons and use a native for loop instead. You can read about the performance comparison here.

If you simply want to duplicate the object, you can achieve that with the following method:

let myMap2 = JSON.parse(JSON.stringify(myMap1));

Other methods like Object.assign() and ES6 spread operators will shallow copy the object, while the above method deep copies it, ensuring every level of the object is duplicated.

Answer 6

To duplicate an object by looping through an array of keys, you can follow this approach:

let myMap1 = {};
let myMap2 = {};

myMap1["key1"] = "value1";
myMap1["key2"] = "value2";
myMap1["key3"] = "value3";

// create an array of the keys in myMap1
let myMap1_keys = Object.keys(myMap1);

// loop through the array of keys
for (let i = 0; i < myMap1_keys.length; i++) {
  myMap2[myMap1_keys[i]] = myMap1[myMap1_keys[i]];
}

It is recommended to avoid using a for..in loop for performance reasons and use a native for loop instead. You can read about the performance comparison here.

If you simply want to duplicate the object, you can achieve that with the following method:

let myMap2 = JSON.parse(JSON.stringify(myMap1));

Other methods like Object.assign() and ES6 spread operators will shallow copy the object, while the above method deep copies it, ensuring every level of the object is duplicated.

Answer 7

Answer №4

If you're looking to iterate over keys, this code snippet may be useful for you.

let fruits = {};
let colors = {};

fruits["apple"] = "red";
fruits["banana"] = "yellow";
fruits["orange"] = "orange";

var fruitKeys = Object.keys(fruits);

for (var j = 0; j < fruitKeys.length; j++) {
  colors[fruitKeys[j]] = fruits[fruitKeys[j]];
 alert(colors[fruitKeys[j]]);
}

Answer 8

If you're looking to iterate over keys, this code snippet may be useful for you.

let fruits = {};
let colors = {};

fruits["apple"] = "red";
fruits["banana"] = "yellow";
fruits["orange"] = "orange";

var fruitKeys = Object.keys(fruits);

for (var j = 0; j < fruitKeys.length; j++) {
  colors[fruitKeys[j]] = fruits[fruitKeys[j]];
 alert(colors[fruitKeys[j]]);
}

Modifying JavaScript object values using the Object() constructor

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The module cannot be located, despite my efforts to reinstall and verify all addresses, the error still persists

Is it possible to include numbers and commas in JQuery Validation?

When loading a page for the first time, the Vue.js transition does not take effect

Search functionality that dynamically updates results as the user types, thanks

Ways to determine the total amount of existing files in a directory

Several features - Second function malfunctioning

Flexbox Resizing Notification(?)

Storing Form Input in Browser's Local Memory

Organize a collection of items in AngularJS

How to retrieve the length of an array stored in the data object of a Vue instance

What is the best approach for presenting MySQL data on an HTML div through Node.js?

Utilizing Ember to transmit models to Bootstrap Popovers

top margin is functioning properly in Internet Explorer, but not in Google Chrome

Unexpected TypeError occurred when trying to Fetch data from an Express Server hosted on Window object

Please explain this ES6 syntax to me: Using a colon after a function call

What is the best way to replicate the content of the textarea exactly as it is (with all line breaks and special characters)?

Is the latest Swiper JS version compatible with outdated web browsers?

The revalidation feature in Next.js' getStaticProps function does not seem to be

Can javascript be used to swap out the folder in my URL?

When organizing data, the key value pair automatically sorts information according to the specified key