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
- Using map.set() Method
- Using Map Object and Spread Operator
- Using Array.map() Method
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); |
Map(3) { 'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3' }
Method 2: Using map set() Method
In this method, we use JavaScript map.set() method to insert the pair to 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','neveropen') // Display output console.log(map1) |
Map(3) {
'First Name' => 'Jatin',
'Last Name' => 'Sharma',
'website' => 'neveropen'
}
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); |
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); |
Map(2) { 'a' => 100, 'b' => 200 }
