How to update a Value in a Map in JavaScript

# Table of Contents

1. Update a Value in a Map using JavaScript
2. Conditionally update a value in a Map object
3. Update an Array Value in a Map object
4. Update an Object value in a Map object

# Update a Value in a Map using JavaScript

Use the set() method to update a value in a Map, e.g. map.set('key', 'value').

The set() method adds or updates the element with the provided key and value and returns the Map object.

Copied!
const map1 = new Map([
  ['name', 'bobby hadz'],
  ['age', 30],
]);

// 👇️ Map(2) { 'name' => 'bobby hadz', 'age' => 30 }
console.log(map1);

map1.set('name', 'alice');
console.log(map1.get('name')); // 👉️ "alice"

We used the Map.set() method to update a value in a Map object.

The set() method takes 2 parameters:

1. The key of the element
2. The value of the element

If the specified key doesn't exist in the Map, the key-value pair is added, otherwise, the value of the key gets updated.

# Conditionally update a value in a Map object

To conditionally update a value in a Map object:

1. Use the Map.forEach() method to iterate over the Map.
2. Check if each value meets a certain condition.
3. Update the value if the condition is met.

Copied!
const map1 = new Map([
  ['name', 'bobby hadz'],
  ['age', 30],
]);

map1.forEach((value, key) => {
  if (value === 30) {
    map1.set(key, 31);
  }
});

// 👇️ Map(2) { 'name' => 'bobby hadz', 'age' => 31 }
console.log(map1);

console.log(map1.get('age')); // 👉️ 31

The function we passed to the Map.forEach() method gets called with the value and key of each element.

On each iteration, we check if a certain condition is met and update the value of the current key if it is.

If you need to check if a key is contained in a Map, use the Map.has() method.

Copied!
const map1 = new Map([
  ['name', 'bobby hadz'],
  ['age', 30],
]);

console.log(map1.has('name')); // 👉️ true
console.log(map1.has('country')); // 👉️ false

The Map.has() method returns true if the specified key is contained in the Map and false otherwise.

# Update an Array Value in a Map object

You can also use the Map.set() method to update a key that stores an array in a Map object.

Copied!
const map1 = new Map([
  ['name', 'bobby hadz'],
  ['numbers', [1, 2]],
  ['address', {country: 'Chile'}],
]);

// Map(3) {
//   'name' => 'bobby hadz',
//   'numbers' => [ 1, 2 ],
//   'address' => { country: 'Chile' }
// }
console.log(map1);

map1.set('numbers', [...map1.get('numbers'), 3]);

console.log(map1.get('numbers')); // 👉️ [1, 2, 3]

We used the Map.get() method to get access to the existing elements in the array.

We used the spread syntax (...) to unpack the values of the array into a new array to which we can add new elements.

# Update an Object value in a Map object

The same pattern can be used to update the value of a Map key that stores an object.

Copied!
const map1 = new Map([
  ['name', 'bobby hadz'],
  ['numbers', [1, 2]],
  ['address', {country: 'Chile'}],
]);

// Map(3) {
//   'name' => 'bobby hadz',
//   'numbers' => [ 1, 2 ],
//   'address' => { country: 'Chile' }
// }
console.log(map1);

map1.set('address', {...map1.get('address'), city: 'Santiago'});

// 👇️️ {country: 'Chile', city: 'Santiago'}
console.log(map1.get('address'));

We passed the same key to the set() and get() methods and added an additional key-value pair to the object using the spread syntax (...).

You don't have to do this all in one step. You could call the get() method to store the value in a variable, which you can manipulate before using the set() method.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Update all the Values in an Object using JavaScript
• Update an Object's Property in Array of Objects in JS