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:
Table of Content
- Map constructor
- Using map set() Method
- Using Map object and spread operator
- Using Array map() Method
- Using Object.entries() and Spread Operator
- Using Array.prototype.forEach()
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);
Output
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','w3wiki')
// Display output
console.log(map1)
Output
Map(3) {
'First Name' => 'Jatin',
'Last Name' => 'Sharma',
'website' => 'w3wiki'
}
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);
Output
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);
Output
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);
Output
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);
Output
Map(3) { 'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3' }
Contact Us