How to Create a Map of Maps in JavaScript - Step by Step Examples

How to Create a Map of Maps in JavaScript ?

Answer

To create a map of maps in JavaScript, you can use the Map data structure. A map of maps allows you to organize data hierarchically, where each key in the outer map points to another map.

✐ Examples

1 Creating a Map of Maps with Integer Keys and Values

We can create a map of maps in JavaScript by using the Map data structure. This example demonstrates creating a map where both the outer and inner maps use integers for keys and values.

For example,

We start by declaring and initializing a map named outerMap where each value is another map.
We populate the inner maps with key-value pairs.
We insert the inner maps into the outer map using appropriate keys.
We print the resulting map of maps to the console to verify the structure.

JavaScript Program

const outerMap = new Map();

// Populate the inner maps
const innerMap1 = new Map([
    [1, 10],
    [2, 20],
    [3, 30]
]);
const innerMap2 = new Map([
    [4, 40],
    [5, 50],
    [6, 60]
]);

// Insert the inner maps into the outer map
outerMap.set(1, innerMap1);
outerMap.set(2, innerMap2);

// Print the resulting map of maps
console.log('Map of maps with integer keys and values:');
outerMap.forEach((innerMap, outerKey) => {
    console.log(`Outer key: ${outerKey}`);
    innerMap.forEach((value, innerKey) => {
        console.log(`  Inner key: ${innerKey}, value: ${value}`);
    });
});

Output

Map of maps with integer keys and values:
Outer key: 1
  Inner key: 1, value: 10
  Inner key: 2, value: 20
  Inner key: 3, value: 30
Outer key: 2
  Inner key: 4, value: 40
  Inner key: 5, value: 50
  Inner key: 6, value: 60

2 Creating a Map of Maps with Mixed Key and Value Types

We can create a map of maps in JavaScript by using the Map data structure. This example demonstrates creating a map where the outer map uses strings for keys and the inner maps use integers for keys and strings for values.

For example,

We start by declaring and initializing a map named outerMap where each value is another map with mixed key and value types.
We populate the inner maps with key-value pairs.
We insert the inner maps into the outer map using appropriate keys.
We print the resulting map of maps to the console to verify the structure.

JavaScript Program

const outerMap = new Map();

// Populate the inner maps
const innerMap1 = new Map([
    [1, 'one'],
    [2, 'two'],
    [3, 'three']
]);
const innerMap2 = new Map([
    [4, 'four'],
    [5, 'five'],
    [6, 'six']
]);

// Insert the inner maps into the outer map
outerMap.set('first', innerMap1);
outerMap.set('second', innerMap2);

// Print the resulting map of maps
console.log('Map of maps with mixed key and value types:');
outerMap.forEach((innerMap, outerKey) => {
    console.log(`Outer key: ${outerKey}`);
    innerMap.forEach((value, innerKey) => {
        console.log(`  Inner key: ${innerKey}, value: ${value}`);
    });
});

Output

Map of maps with mixed key and value types:
Outer key: first
  Inner key: 1, value: one
  Inner key: 2, value: two
  Inner key: 3, value: three
Outer key: second
  Inner key: 4, value: four
  Inner key: 5, value: five
  Inner key: 6, value: six

3 Creating a Map of Maps with String Keys and Double Values

We can create a map of maps in JavaScript by using the Map data structure. This example demonstrates creating a map where both the outer and inner maps use strings for keys and doubles for values.

For example,

We start by declaring and initializing a map named outerMap where each value is another map with strings for keys and doubles for values.
We populate the inner maps with key-value pairs.
We insert the inner maps into the outer map using appropriate keys.
We print the resulting map of maps to the console to verify the structure.

JavaScript Program

const outerMap = new Map();

// Populate the inner maps
const innerMap1 = new Map([
    ['A', 1.1],
    ['B', 2.2],
    ['C', 3.3]
]);
const innerMap2 = new Map([
    ['D', 4.4],
    ['E', 5.5],
    ['F', 6.6]
]);

// Insert the inner maps into the outer map
outerMap.set('group1', innerMap1);
outerMap.set('group2', innerMap2);

// Print the resulting map of maps
console.log('Map of maps with string keys and double values:');
outerMap.forEach((innerMap, outerKey) => {
    console.log(`Outer key: ${outerKey}`);
    innerMap.forEach((value, innerKey) => {
        console.log(`  Inner key: ${innerKey}, value: ${value}`);
    });
});

Output

Map of maps with string keys and double values:
Outer key: group1
  Inner key: A, value: 1.1
  Inner key: B, value: 2.2
  Inner key: C, value: 3.3
Outer key: group2
  Inner key: D, value: 4.4
  Inner key: E, value: 5.5
  Inner key: F, value: 6.6

Summary

In this tutorial, we learned How to Create a Map of Maps in JavaScript language with well detailed examples.

◀ Previous Next ▶

JavaScript Tutorials

JavaScript How-Tos

How to Create a Map of Maps in JavaScript - Step by Step Examples