How to Merge Two Maps in TypeScript


How to Merge Two Maps in TypeScript ?

Answer

To merge two maps in TypeScript, you can use the spread operator to create a new map that combines the contents of both maps. This method provides a concise and convenient way to merge maps.



✐ Examples

1 Merging Two Maps Using the Spread Operator

We can merge two maps in TypeScript using the spread operator, which creates a new map that includes all key-value pairs from both maps.

For example,

  1. We start by declaring and initializing two maps named map1 and map2 with some key-value pairs. In this example, both maps have string keys and integer values.
  2. We create a new map named mergedMap that combines the contents of map1 and map2 using the spread operator.
  3. We print the merged map to the console using the console.log function to verify the merge.

TypeScript Program

const map1 = new Map<string, number>([
    ['one', 1],
    ['two', 2]
]);
const map2 = new Map<string, number>([
    ['three', 3],
    ['four', 4]
]);

// Merge the maps using the spread operator
const mergedMap = new Map([...map1, ...map2]);

// Print the merged map
console.log('Merged Map:', Array.from(mergedMap));

Output

Merged Map: [['one', 1], ['two', 2], ['three', 3], ['four', 4]]

2 Merging Two Maps with Overlapping Keys Using the Spread Operator

We can merge two maps in TypeScript and handle overlapping keys using the spread operator. If a key exists in both maps, the value from the second map will overwrite the value in the first map.

For example,

  1. We start by declaring and initializing two maps named map1 and map2 with some key-value pairs. In this example, both maps have string keys and integer values, and there is an overlapping key.
  2. We create a new map named mergedMap that combines the contents of map1 and map2 using the spread operator. The value from map2 will overwrite the value from map1 for overlapping keys.
  3. We print the merged map to the console using the console.log function to verify the merge.

TypeScript Program

const map1 = new Map<string, number>([
    ['one', 1],
    ['two', 2]
]);
const map2 = new Map<string, number>([
    ['two', 22],
    ['three', 3]
]);

// Merge the maps using the spread operator
const mergedMap = new Map([...map1, ...map2]);

// Print the merged map
console.log('Merged Map:', Array.from(mergedMap));

Output

Merged Map: [['one', 1], ['two', 22], ['three', 3]]

3 Merging Two Maps Using forEach Method

We can also merge two maps in TypeScript using the forEach method to add key-value pairs from one map to another. This method provides a more traditional approach to merging maps.

For example,

  1. We start by declaring and initializing two maps named map1 and map2 with some key-value pairs. In this example, both maps have string keys and integer values.
  2. We use the forEach method to iterate over map2 and add each key-value pair to map1 using the set method.
  3. We print the merged map to the console using the console.log function to verify the merge.

TypeScript Program

const map1 = new Map<string, number>([
    ['one', 1],
    ['two', 2]
]);
const map2 = new Map<string, number>([
    ['three', 3],
    ['four', 4]
]);

// Merge map2 into map1 using forEach
map2.forEach((value, key) => {
    map1.set(key, value);
});

// Print the merged map
console.log('Merged Map:', Array.from(map1));

Output

Merged Map: [['one', 1], ['two', 2], ['three', 3], ['four', 4]]

Summary

In this tutorial, we learned How to Merge Two Maps in TypeScript language with well detailed examples.




More TypeScript Maps Tutorials

  1. How to create an Empty Map in TypeScript ?
  2. How to create a Map with Initial Key-Value Pairs in TypeScript ?
  3. How to Print a Map in TypeScript ?
  4. How to Add a Key-Value Pair to a Map in TypeScript ?
  5. How to Set a Default Value for a Key in a Map in TypeScript ?
  6. How to Update the Value for a Key in a Map in TypeScript ?
  7. How to Check if a Map is Empty in TypeScript ?
  8. How to Check if a Key Exists in a Map in TypeScript ?
  9. How to Check if a Value Exists in a Map in TypeScript ?
  10. How to Get the Value Associated with a Key in a Map in TypeScript ?
  11. How to Remove a Key-Value Pair from a Map in TypeScript ?
  12. How to Remove Key-Value Pairs from a Map Based on Values in TypeScript ?
  13. How to Clear All Key-Value Pairs from a Map in TypeScript ?
  14. How to Iterate Over Keys in a Map in TypeScript ?
  15. How to Iterate Over Values in a Map in TypeScript ?
  16. How to Iterate Over Entries (Key-Value Pairs) in a Map in TypeScript ?
  17. How to Get the Size (Number of Key-Value Pairs) of a Map in TypeScript ?
  18. How to Convert a Map to an Array of Keys in TypeScript ?
  19. How to Convert a Map to an Array of Values in TypeScript ?
  20. How to Convert a Map to an Array of Key-Value Pairs in TypeScript ?
  21. How to Merge Two Maps in TypeScript ?
  22. How to Copy a Map in TypeScript ?
  23. How to Check if Two Maps are Equal in TypeScript ?
  24. How to Sort a Map by Keys in TypeScript ?
  25. How to Sort a Map by Values in TypeScript ?
  26. How to Filter a Map Based on Keys in TypeScript ?
  27. How to Filter a Map Based on Values in TypeScript ?
  28. How to Reduce Values in a Map to a Single Value in TypeScript ?
  29. How to Convert an Array of Key-Value Pairs to a Map in TypeScript ?
  30. How to Convert a Map to a JSON String in TypeScript ?
  31. How to Convert a JSON String to a Map in TypeScript ?
  32. How to Swap Keys and Values in a Map in TypeScript ?
  33. How to Create a Map of Maps in TypeScript ?
  34. How to Iterate Over a Map of Maps in TypeScript ?