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

What is the proper way to add a string to a TypeScript array?

Unable to bring in @material-ui/core/styles/MuiThemeProvider

Secure JSON data by transmitting it safely to the front end within a Node.js environment

Passing an ID in Next.js without showing it in the URL

Enable Sound when Hovering over Video in React Next.js

Ways to access the values of checkboxes that are initially checked by default

unable to send array in cookie through express isn't functioning

Angular's use of ES6 generator functions allows for easier management of

Disable the mouseenter event in jQuery when the window is resized

Ways to extract the first name and email address from a JSON payload

"Encountering a bug with Angular-bootstrap pagination displaying an undefined function

Turn off email alerts for items and folders in ALFRESCO 5.2

The art of revealing and concealing code blocks in AngularJS

Is it possible for me to alter the script for my button's onclick

What steps are needed to switch colors after a loop has been clicked?

Align images of varying sizes vertically within div containers, even when the image is larger than the div itself

Analyzing individuals within an array

Adding HTML content inside an iFrame at a specific cursor position in Internet Explorer

What is the best way to properly pass parameters?

The functionality to disable the ES lint max length rule is malfunctioning