How to Add a key/value Pair to Map in JavaScript ?

This article will demonstrate how we can add a key-value pair in the JavaScript map. JavaScript Map is a collection of key-value pairs in the same sequence they are inserted. These key values can be of primitive type or the JavaScript object.

All methods to add key-value pairs to the JavaScript Map:

Map constructor

This method uses the map Constructor function to create the required JavaScript map.

Syntax:

const myMap  = new Map()        
// or
const myMap = new Map(iterable)    // Iterable e.g., 2-d array

Example: In this example, we will create a Map from the 2-d array using a map constructor

const map1 = new Map([
    ["key1", "value1"],
    ["key2", "value2"],
    ["key3", "value3"],
]);

// Display the map
console.log(map1);

Map(3) { 'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3' }

Using map set() Method

In this method, we use the JavaScript map.set() method to insert the pair into the map.

Syntax:

myMap.set(key,value);

Example: In this example, we will insert some key-value pairs using map.set method.

const map1 = new Map();

// Insert pairs
map1.set('First Name','Jatin');
map1.set('Last Name','Sharma');
map1.set('website','GeeksforGeeks')

// Display output
console.log(map1)

Map(3) {
  'First Name' => 'Jatin',
  'Last Name' => 'Sharma',
  'website' => 'GeeksforGeeks'
}

Using Map object and spread operator

This method demonstrate how we can extend a given map or insert the pairs from a new map using the spread operator

Example: In this example, we will extend the map1 using spreate operator to iterate the map2 key-value pairs.

const map1 = new Map([
    [1, 10],
    [2, 21],
]);
const map2 = new Map([
    ["a", 100],
    ["b", 200],
]);

map1.set(...map2);
console.log(map1);

Map(3) { 1 => 10, 2 => 21, [ 'a', 100 ] => [ 'b', 200 ] }

Using Array map() Method

In this method we will create a JavaScript map object from a 2 dimensional array without using the map constructor by using array.map() method.

Example: In this example, we will create an array map from given 2-d array.

// Given array
const arr = [
    ["a", 100],
    ["b", 200],
];

// Map object
let map1 = new Map();

// Iterate the array and insert pairs to map
arr.map(([key, value]) => map1.set(key, value));

// Display output
console.log(map1);

Map(2) { 'a' => 100, 'b' => 200 }

Using Object.entries() and Spread Operator

This method converts an object into a Map using 'Object.entries()' which returns an array of a given object's own enumerable string-keyed property [key, value] pairs.

Example:

const obj = {
    key1: 'value1',
    key2: 'value2',
    key3: 'value3'
};

const map1 = new Map([...Object.entries(obj)]);

// Display the map
console.log(map1);

Map(3) { 'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3' }

Using Array.prototype.forEach()

This method demonstrates how to add key-value pairs to a Map by iterating over an array of pairs using Array.prototype.forEach().

Example: In this example, we will use Array.prototype.forEach() to add key-value pairs to a Map.

// Given array of pairs
const pairs = [
    ["key1", "value1"],
    ["key2", "value2"],
    ["key3", "value3"]
];

// Create a new Map
const map1 = new Map();

// Use forEach to add each pair to the map
pairs.forEach(([key, value]) => {
    map1.set(key, value);
});

// Display the map
console.log(map1);

Map(3) { 'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3' }