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:

Method 1: 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

Javascript

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

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

Output

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

Method 2: 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.

Javascript

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)

Output

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

Method 3: 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.

Javascript

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

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

Output

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

Method 4: 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.

Javascript

// 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);

Output

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