How to update a Value in a Map using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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.

index.js
const map1 = new Map([ ['name', 'Tom'], ['numbers', [1, 2]], ['address', {country: 'Chile'}], ]); // 👇️ {'numbers' => [1, 2], 'name' => 'Tom', // 'address' => {country: 'Chile'}} console.log(map1); // ✅ Update STRING map1.set('name', 'Jim'); console.log(map1.get('name')); // 👉️ 'Jim' // ✅ Update ARRAY map1.set( 'numbers', [...map1.get('numbers'), 3], ); console.log(map1.get('numbers')); // 👉️ [1, 2, 3] // ✅ Update OBJECT map1.set( 'address', {...map1.get('address'), city: 'Santiago'}, ); // 👇️️ {country: 'Chile', city: 'Santiago'} console.log(map1.get('address'));

We used the Map.set() method to update a string, object and array values in a Map.

The set() method takes 2 parameters:

  1. The key of the element
  2. The value of th element
Note that the set() method can also be used to add elements to a Map.

In the first example, we used the method to update a string value in the Map.

index.js
const map1 = new Map([ ['name', 'Tom'], ['numbers', [1, 2]], ['address', {country: 'Chile'}], ]); // 👇️ {'numbers' => [1, 2], 'name' => 'Tom', // 'address' => {country: 'Chile'}} console.log(map1); map1.set('name', 'Jim'); console.log(map1.get('name')); // 👉️ 'Jim'

However, Updating arrays and objects is a bit more tricky.

In the second example, we used the set() method to update an array.

index.js
const map1 = new Map([ ['name', 'Tom'], ['numbers', [1, 2]], ['address', {country: 'Chile'}], ]); // 👇️ {'numbers' => [1, 2], 'name' => 'Tom', // 'address' => {country: 'Chile'}} console.log(map1); map1.set( 'numbers', [...map1.get('numbers'), 3], ); console.log(map1.get('numbers')); // 👉️ [1, 2, 3]

To get access of the existing elements in an array, we used the Map.get() method, passing it the same key.

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

The third example uses the same pattern to update an object.

index.js
const map1 = new Map([ ['name', 'Tom'], ['numbers', [1, 2]], ['address', {country: 'Chile'}], ]); // 👇️ {'numbers' => [1, 2], 'name' => 'Tom', // '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 operator.

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.

Further Reading #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.