Apply a function to each entry of a map in JavaScript

This post will discuss how to apply a function to each entry of a map in JavaScript.

Applying a function to each entry of a map in JavaScript is a common task that involves transforming the values of a map object based on a given function. A map is a collection of key-value pairs, where each key can have only one associated value. The value can be any JavaScript type, such as a number, a string, an array, or even another map. Here are some of the possible functions:

1. Using `Map.prototype.forEach()` function

This is a built-in function that executes a given function for each key-value pair in the map, in insertion order. The function can access the current value, the current key, and the map object as its parameters. The forEach() function does not return anything, but it can modify the original map or perform other side effects. The following code illustrates this:

// Create a map with some key-value pairs

const myMap = new Map([['a', 10], ['b', 20], ['c', 30]]);

// Define a function that doubles the value

const doubleValue = (value, key, map) => {

// Update the map with the double the value

map.set(key, value * 2);

};

// Use forEach to apply the function to each entry in the map

myMap.forEach(doubleValue);

// The original map is modified

// Map(3) { 'a' => 20, 'b' => 40, 'c' => 60 }

console.log(myMap);

Download Run Code

2. Using `for…of` loop with destructuring assignment

This is a simple and imperative way to iterate over the entries of a map and apply a function to each entry using a destructuring assignment. We can use this function to access and manipulate the key and value of each entry in the map. The function receives the key and value as arguments. The following code illustrates this:

// Create a map with some key-value pairs

const myMap = new Map([['a', 10], ['b', 20], ['c', 30]]);

// Define a function that doubles the value and returns it

const doubleValue = (value) => {

return value * 2;

};

// Use a for…of loop to iterate over the entries of the original map

for (const [key, value] of myMap)

{

// Apply the function to the value

const newValue = doubleValue(value);

// Add the key and the new value to the new map

myMap.set(key, newValue);

}

// The original map is modified

// Map(3) { 'a' => 20, 'b' => 40, 'c' => 60 }

console.log(myMap);

Download Run Code

3. Using `Array.prototype.map()` function

This is a concise and functional way to create a new Map from applying a function to each entry of an existing Map. We can use the spread syntax (…) to convert a map into an array of key-value pairs and apply the function to each pair using the map() function. This function takes a callback function and returns a new array with the results of calling the function on every element. Then we convert the array back into a map using the Map() constructor. The following code illustrates this:

// Create a map with some key-value pairs

const myMap = new Map([['a', 10], ['b', 20], ['c', 30]]);

// Define a function that doubles the value and returns it

const double = (value) => {

return value * 2;

};

// Use spread syntax to convert the map into an array of entries

const array = [...myMap];

// Use map to apply the function to each entry and return a new array

const newArray = array.map(([key, value]) => [key, double(value)]);

// Use spread syntax again to convert the new array into a new map

const newMap = new Map([...newArray]);

// The original map is not modified

// Map(3) { 'a' => 10, 'b' => 20, 'c' => 30 }

console.log(myMap);

// The new map contains the transformed values

// Map(3) { 'a' => 20, 'b' => 40, 'c' => 60 }

console.log(newMap);

Download Run Code

That’s all about applying a function to each entry of a map in JavaScript.

Apply a function to each entry of a map in JavaScript

1. Using Map.prototype.forEach() function

2. Using for…of loop with destructuring assignment

3. Using Array.prototype.map() function

Share this:

1. Using `Map.prototype.forEach()` function

2. Using `for…of` loop with destructuring assignment

3. Using `Array.prototype.map()` function