How to Update Object Value in Map in JavaScript

Updating the value of an object stored in a Map in JavaScript is a common operation when working with dynamic data structures. The Map object in JavaScript allows you to store key-value pairs and provides an efficient way to update these values.

let myMap = new Map();
myMap.set('name', { first: 'Alice', last: 'Wonderland' });
myMap.set('age', 25);

// Update the 'name' object value
myMap.set('name', { first: 'Alice', last: 'Kingsleigh' });

console.log(myMap.get('name')); // { first: 'Alice', last: 'Kingsleigh' }

• Purpose: Update the value of an object stored in a Map.
• Common Method: Use map.set(key, newValue) to update the value for a specific key in a Map.

The Map object in JavaScript is an ordered collection of key-value pairs where keys can be of any type, including objects. Updating the value of a key in a Map is straightforward and can be done using the set() method. Unlike plain objects, a Map preserves the insertion order of the keys, which can be useful in many scenarios.

Updating a Value Using Map.set()

The Map.set() method is used to add or update an element in a Map object with the specified key and value. If the key already exists, set() updates the value.

Example 1: Updating a Simple Value

let myMap = new Map();
myMap.set('name', 'Alice');
myMap.set('age', 25);

// Update the 'age' value
myMap.set('age', 26);

console.log(myMap.get('age')); // 26

Explanation:

• myMap.set('name', 'Alice'): Adds a key-value pair to the Map.
• myMap.set('age', 26): Updates the value associated with the key 'age'.
• myMap.get('age'): Retrieves the updated value, which is now 26.

Example 2: Updating an Object Value

let myMap = new Map();
myMap.set('user', { name: 'Alice', age: 25 });

// Update the 'user' object
myMap.set('user', { name: 'Alice', age: 26 });

console.log(myMap.get('user')); // { name: 'Alice', age: 26 }

Explanation:

• myMap.set('user', { name: 'Alice', age: 25 }): Adds an object as a value in the Map.
• myMap.set('user', { name: 'Alice', age: 26 }): Replaces the object with an updated version.
• myMap.get('user'): Retrieves the updated object.

Updating a Nested Object Value

When dealing with a nested object, you may want to update just a single property of the object stored in the Map without replacing the entire object.

Example 3: Modifying a Property of a Nested Object

let myMap = new Map();
myMap.set('user', { name: 'Alice', details: { age: 25, location: 'Wonderland' } });

// Update the 'age' property of the nested object
let user = myMap.get('user');
user.details.age = 26;
myMap.set('user', user);

console.log(myMap.get('user')); 
// { name: 'Alice', details: { age: 26, location: 'Wonderland' } }

Explanation:

• myMap.get('user'): Retrieves the current object stored in the Map.
• user.details.age = 26: Updates the age property of the nested object.
• myMap.set('user', user): Reassigns the updated object back to the Map.

Using Map.forEach() for Bulk Updates

The Map.forEach() method can be used to iterate over all entries in a Map and apply updates to the values in bulk.

Example 4: Incrementing All Numeric Values

let myMap = new Map([
  ['age', 25],
  ['score', 90]
]);

// Increment all numeric values
myMap.forEach((value, key) => {
  if (typeof value === 'number') {
    myMap.set(key, value + 1);
  }
});

console.log([...myMap.entries()]); 
// [ ['age', 26], ['score', 91] ]

Explanation:

• myMap.forEach((value, key) => {...}): Iterates over each entry in the Map.
• if (typeof value === 'number') {...}: Checks if the value is numeric.
• myMap.set(key, value + 1): Updates the numeric value by incrementing it by 1.

Conclusion

Updating object values in a Map in JavaScript is a versatile task that can be accomplished using the Map.set() method. Whether you’re updating simple values, modifying nested objects, or applying bulk updates, understanding how to manipulate Map entries is crucial for efficient data management in JavaScript.

By mastering these techniques, you can effectively work with complex data structures, making your code more dynamic and adaptable to various scenarios.