How to create a Map with Initial Key-Value Pairs in JavaScript

How to create a Map with Initial Key-Value Pairs in JavaScript ?

Answer

To create a map with initial key-value pairs in JavaScript, you can use the Map constructor along with an array of key-value pairs. This creates a new map object with predefined key-value pairs.

✐ Examples

1 Creating a Map with Initial Key-Value Pairs Using Map Constructor

We can create a map in JavaScript with initial key-value pairs using the Map constructor and passing an array of key-value pairs.

For example,

We start by declaring a variable named myMap. This variable will hold our map with initial key-value pairs.
We use the new Map() constructor and pass an array of arrays, where each inner array contains a key-value pair. In JavaScript, the Map constructor can take an array of key-value pairs to initialize the map.
The newly created map is now assigned to the myMap variable. In this example, the map has string keys and integer values.
We can now perform various operations on this map, such as adding more key-value pairs, checking for the presence of keys, and retrieving values.

JavaScript Program

let myMap = new Map([
    ['one', 1],
    ['two', 2],
    ['three', 3]
]);

// Operations on the map
myMap.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

Output

one: 1
two: 2
three: 3

2 Creating a Map with Different Key-Value Types

We can create a map in JavaScript with initial key-value pairs of different types using the Map constructor.

For example,

We start by declaring a variable named studentGrades. This variable will hold our map with initial key-value pairs where keys are strings (student names) and values are characters (grades).
We use the new Map() constructor and pass an array of arrays, where each inner array contains a key-value pair. In JavaScript, the Map constructor can take an array of key-value pairs to initialize the map.
The newly created map is now assigned to the studentGrades variable. In this example, the map has string keys and string values representing grades.
We can now perform various operations on this map, such as adding more key-value pairs, checking for the presence of keys, and retrieving values.

JavaScript Program

let studentGrades = new Map([
    ['Alice', 'A'],
    ['Bob', 'B'],
    ['Charlie', 'C']
]);

// Operations on the map
studentGrades.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

Output

Alice: A
Bob: B
Charlie: C

3 Creating a Map with Integer Keys and Float Values

We can create a map in JavaScript with initial key-value pairs where keys are integers and values are floats using the Map constructor.

For example,

We start by declaring a variable named productPrices. This variable will hold our map with initial key-value pairs where keys are integers (product IDs) and values are floats (prices).
We use the new Map() constructor and pass an array of arrays, where each inner array contains a key-value pair. In JavaScript, the Map constructor can take an array of key-value pairs to initialize the map.
The newly created map is now assigned to the productPrices variable. In this example, the map has integer keys and float values.
We can now perform various operations on this map, such as adding more key-value pairs, checking for the presence of keys, and retrieving values.

JavaScript Program

let productPrices = new Map([
    [101, 29.99],
    [102, 39.99],
    [103, 49.99]
]);

// Operations on the map
productPrices.forEach((value, key) => {
    console.log(`Product ${key}: $${value}`);
});

Output

Product 101: $29.99
Product 102: $39.99
Product 103: $49.99

Summary

In this tutorial, we learned How to create a Map with Initial Key-Value Pairs in JavaScript language with well detailed examples.

◀ Previous Next ▶

JavaScript Tutorials

JavaScript How-Tos

How to create a Map with Initial Key-Value Pairs in JavaScript