Merge entries of a map to another map in JavaScript
This post will discuss how to merge entries of a map to another map in JavaScript.
There are several ways to merge entries of a map to another map in JavaScript, which is a common task that involves merging two map objects into one. Here are some of the possible functions to merge entries of a map to another map:
1. Using Map.prototype.set() function
The Map.prototype.set() function sets the value for a key in a map, or updates it if it already exists. We can use a for loop to iterate over the entries of source map and add them to target map using this function. The following code illustrates this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Create two maps with some key-value pairs const firstMap = new Map([["a", 10], ["b", 20], ["c", 30]]); const secondMap = new Map([["d", 40], ["c", 50]]); // Function to adds all entries of the source map to the target map function addEntries(source, target) { // Loop over the entries of the source map for (let [key, value] of source.entries()) { // Add or update the entry to the target map target.set(key, value); } } // Add all entries of the secondMap to the firstMap addEntries(secondMap, firstMap); // Map(4) { 'a' => 10, 'b' => 20, 'c' => 50, 'd' => 40 } console.log(firstMap); |
We can also use the Map.prototype.forEach() function to iterate over the entries of the source map and execute a provided function for each value in a map. This function can access the current value, the current key, and the map object as its parameters. The following code illustrates this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Create two maps with some key-value pairs const firstMap = new Map([["a", 10], ["b", 20], ["c", 30]]); const secondMap = new Map([["d", 40], ["c", 50]]); // Function to adds all entries of the source map to the target map function addEntries(source, target) { // Iterate over the entries of source map using forEach source.forEach((value, key, map) => { // Set the key and value in the target map target.set(key, value); }); } // Add all entries of the secondMap to the firstMap addEntries(secondMap, firstMap); // Map(4) { 'a' => 10, 'b' => 20, 'c' => 50, 'd' => 40 } console.log(firstMap); |
Note that if multiple maps have the same key, the value of the merged map will be the value of the last merging map with that key. We can provide a merge strategy that determines how to handle duplicate keys. For example, while looping through the entries of the source map, we can check if the key already exists in the target map. If the key does not exist, add it to the target map. This way, we can avoid overwriting the values if they have the same keys in both maps.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// Create two maps with some key-value pairs const firstMap = new Map([["a", 10], ["b", 20], ["c", 30]]); const secondMap = new Map([["d", 40], ["c", 50]]); // Function to adds all entries of the source map to the target map function addEntries(source, target) { // Iterate over the entries of source map using forEach source.forEach((value, key, map) => { // If the key doesn't exist in the target map if (!target.has(key)) { // Set the key and value in the target map target.set(key, value); } }); } // Add all entries of the secondMap to the firstMap addEntries(secondMap, firstMap); // Map(4) { 'a' => 10, 'b' => 20, 'c' => 30, 'd' => 40 } console.log(firstMap); |
2. Using spread syntax and Map constructor
This is a concise and functional way to create a new map from merging two existing maps. The idea is to use the spread syntax (…) to convert the maps into arrays of [key, value] pairs, and then pass these arrays as arguments to the Map() constructor. This will create a new map with the key-value pairs from all maps. However, if there are duplicate keys, the value of the last map with that key will overwrite the previous values. The following code illustrates this:
|
1 2 3 4 5 6 7 8 9 |
// Create two maps with some key-value pairs const firstMap = new Map([["a", 10], ["b", 20], ["c", 30]]); const secondMap = new Map([["d", 40], ["c", 50]]); // Use the spread syntax to merge the maps into a new map const mergedMap = new Map([...firstMap, ...secondMap]); // Map(6) { 'a' => 10, 'b' => 20, 'c' => 50, 'd' => 40 } console.log(mergedMap); |
3. Using Object.assign() and Object.fromEntries() function
These are two built-in functions that can be used to convert maps to objects and vice versa. The Object.assign() function copies all enumerable own properties from one or more source objects to a target object, and returns the target object. The Object.fromEntries() function transforms an iterable of key-value pairs into an object. We can use these functions to merge two or more maps by converting them to objects, assigning them to a new object, and then converting the new object back to a map. The following code illustrates this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Create two maps with some key-value pairs const firstMap = new Map([["a", 10], ["b", 20], ["c", 30]]); const secondMap = new Map([["d", 40], ["c", 50]]); // create a new object with all the properties from both maps let mergedObject = Object.assign({}, Object.fromEntries(firstMap), Object.fromEntries(secondMap)); // { a: 10, b: 20, c: 50, d: 40 } console.log(mergedObject); // Convert the merged object back to a map using Object.entries() let mergedMap = new Map(Object.entries(mergedObject)); // Map(4) { 'a' => 10, 'b' => 20, 'c' => 50, 'd' => 40 } console.log(mergedMap); |
This works for maps having string or symbol keys, but not other types of keys. Note if both maps have a common key, the merged map will have the value of the last merging map with that key. That’s all about merging entries of a map to another map in JavaScript.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)