A JavaScript Map is a collection that stores each of its elements as a key-value pair. This data type is also referred to as an associative array or a dictionary.

You can use any data type (primitives and objects) as either a key or a value. The Map object remembers the original order of insertion, although you'll typically access values by their key.

In this article, you'll learn about ten JavaScript Map methods that you should master today.

1. How to Create a New Map in JavaScript

You can create a new Map object using the Map() constructor. This constructor accepts one parameter: an iterable object whose elements are key-value pairs.

        let mapObj = new Map([
    [1966, 'Batman: The Movie'],
   [1989, 'Batman'],
   [1992, 'Batman Returns'],
   [1995, 'Batman Forever'],
   [2005, 'Batman Begins'],
   [2008, 'The Dark Knight'],
   [2012, 'The Dark Knight Rises']
]);
console.log(mapObj);
    

Output:

        Map(7) {
   1966 => 'Batman: The Movie',
   1989 => 'Batman',
   1992 => 'Batman Returns',
   1995 => 'Batman Forever',
   2005 => 'Batman Begins',
   2008 => 'The Dark Knight',
   2012 => 'The Dark Knight Rises'
}
    

If you don't supply the parameter, JavaScript will create a new empty Map.

        let mapObj = new Map();
console.log(mapObj);
    

Output:

        Map(0) {}
    

If you try to create a Map with duplicate keys, each repeated key will overwrite the previous value with the new value.

        let mapObj = new Map([
   ['key1', 'value1'],
   ['key2', 'value2'],
   ['key2', 'newValue2']
]);
console.log(mapObj);
    

Output:

        Map(2) {
   'key1' => 'value1',
   'key2' => 'newValue2'
}
    

Here, the value stored against the key2 key is newValue2, not the earlier value2.

You can also create a Map object that holds key-value pairs using mixed data types.

        let mapObj = new Map([
    ["string1", 1],
    [2, "string2"],
    ["string3", 433.234],
    [23.56, 45]
]);
console.log(mapObj);
    

Output:

        Map(4) {
    'string1' => 1,
    2 => 'string2',
    'string3' => 433.234,
    23.56 => 45
}
    

2. Add New Elements to a Map Object

You can add a new element to the Map object using the set() method. This method accepts a key and a value, then adds a new element to the Map object. The method then returns the new Map object with the added value. If the key already exists in the Map, the new value will replace the existing value.

        let mapObj = new Map();
mapObj.set(1966, 'Batman: The Movie');
mapObj.set(1989, 'Batman');
mapObj.set(1992, 'Batman Returns');
mapObj.set(1995, 'Batman Forever');

console.log(mapObj);
    

Output:

        Map(4) {
   1966 => 'Batman: The Movie',
   1989 => 'Batman',
   1992 => 'Batman Returns',
   1995 => 'Batman Forever'
}
    

You can also use variables or constants as keys or values:

        const year1 = 1966;
const movieName1 = 'Batman: The Movie';

let year2 = 1989;
var movieName2 = 'Batman';

let mapObj = new Map();
mapObj.set(year1, movieName1);
mapObj.set(year2, movieName2);

console.log(mapObj);
    

Output:

        Map(2) {
   1966 => 'Batman: The Movie',
   1989 => 'Batman'
}
    

The set() method supports chaining.

        let mapObj = new Map();
mapObj.set(1966, 'Batman: The Movie')
     .set(1989, 'Batman')
     .set(1992, 'Batman Returns')
     .set(1995, 'Batman Forever');

console.log(mapObj);
    

Output:

        Map(4) {
   1966 => 'Batman: The Movie',
   1989 => 'Batman',
   1992 => 'Batman Returns',
   1995 => 'Batman Forever'
}
    

3. Remove All Elements From a Map Object

You can remove all elements from a Map object using the clear() method. This method always returns undefined.

        let mapObj = new Map([
   [1966, 'Batman: The Movie'],
   [1989, 'Batman']
]);
console.log("Size of the Map object: " + mapObj.size);
console.log(mapObj);
 
mapObj.clear();
 
console.log("Size of the Map object after clearing elements: " + mapObj.size);
console.log(mapObj);
    

Output:

        Size of the Map object: 2
Map(2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Size of the Map object after clearing elements: 0
Map(0) {}
    

4. Delete a Specific Element From a Map

You can remove a specific element from a Map object using the delete() method. This method accepts the key of the element to delete from the Map. If the key exists, the method returns true. Otherwise, it returns false.

        let mapObj = new Map([
   [1966, 'Batman: The Movie'],
   [1989, 'Batman']
]);
console.log("Initial Map: ");
console.log(mapObj);
 
mapObj.delete(1966);
 
console.log("Map after deleting the element having key as 1966");
console.log(mapObj);
    

Output:

        Initial Map:
Map(2) { 1966 => 'Batman: The Movie', 1989 => 'Batman' }
Map after deleting the element having key as 1966
Map(1) { 1989 => 'Batman' }
    

5. Check if an Element Exists in a Map

You can check whether an element exists in a Map object using the has() method. This method accepts the key of the element as a parameter to test for presence in the Map object. This method returns true if the key exists. Otherwise, it returns false.

        let mapObj = new Map([
   [1966, 'Batman: The Movie'],
   [1989, 'Batman'],
   [1992, 'Batman Returns'],
   [1995, 'Batman Forever'],
   [2005, 'Batman Begins'],
   [2008, 'The Dark Knight'],
   [2012, 'The Dark Knight Rises']
]);
 
console.log(mapObj.has(1966));
console.log(mapObj.has(1977));
    

Output:

        true
false
    

An element with key 1966 exists in the Map object, so the method returned true. But, since there's no element with key 1977 in the Map object, the method returned false from the second call.

Related: What Is JavaScript and How Does It Work?

6. Accessing the Value for a Specific Key

The get() method returns a specific element from the Map object. This method accepts the key of the element as a parameter. If the key exists in the Map object, the method returns the value of the element. Otherwise, it returns undefined.

        let mapObj = new Map([
    [1966, 'Batman: The Movie'],
    [1989, 'Batman'],
    [1992, 'Batman Returns'],
    [1995, 'Batman Forever'],
    [2005, 'Batman Begins'],
    [2008, 'The Dark Knight'],
    [2012, 'The Dark Knight Rises']
]);
 
console.log(mapObj.get(1966));
console.log(mapObj.get(1988));
    

Output:

        Batman: The Movie
undefined
    

An element with key 1966 exists in the Map object, so the method returned the value of the element. There's no element with key 1988 in the Map object, so the method returned undefined.

7. Access a Map’s Entries via an Iterator

According to the official MDN Web Docs:

The entries() method returns a new Iterator object that contains the [key, value] pairs for each element in the Map object in insertion order. In this particular case, this iterator object is also iterable, so the for-of loop can be used. When the protocol [Symbol.iterator] is used, it returns a function that, when invoked, returns this iterator itself.

You can access each element of the Map using this iterator and a for...of statement:

        let mapObj = new Map([
    [1966, 'Batman: The Movie'],
    [1989, 'Batman'],
    [1992, 'Batman Returns'],
    [1995, 'Batman Forever'],
    [2005, 'Batman Begins'],
    [2008, 'The Dark Knight'],
    [2012, 'The Dark Knight Rises']
]);
 
for (let entry of mapObj.entries()) {
    console.log(entry);
}
    

Output:

        [ 1966, 'Batman: The Movie' ]
[ 1989, 'Batman' ]
[ 1992, 'Batman Returns' ]
[ 1995, 'Batman Forever' ]
[ 2005, 'Batman Begins' ]
[ 2008, 'The Dark Knight' ]
[ 2012, 'The Dark Knight Rises' ]
    

Or you can use the ES6 destructing assignment feature to access each key and value:

        let mapObj = new Map([
    [1966, 'Batman: The Movie'],
    [1989, 'Batman'],
    [1992, 'Batman Returns'],
    [1995, 'Batman Forever'],
    [2005, 'Batman Begins'],
    [2008, 'The Dark Knight'],
    [2012, 'The Dark Knight Rises']
]);
 
for (let [key, value] of mapObj.entries()) {
    console.log("Key: " + key + " Value: " + value);
}
    

Output:

        Key: 1966 Value: Batman: The Movie
Key: 1989 Value: Batman
Key: 1992 Value: Batman Returns
Key: 1995 Value: Batman Forever
Key: 2005 Value: Batman Begins
Key: 2008 Value: The Dark Knight
Key: 2012 Value: The Dark Knight Rises
    

8. How to Iterate Over a Map’s Values

The values() method returns an Iterator object that contains all the values in a Map, and it does this in insertion order.

        let mapObj = new Map([
    [1966, 'Batman: The Movie'],
    [1989, 'Batman'],
    [1992, 'Batman Returns']
]);
 
const iteratorObj = mapObj.values();
 
for (let value of iteratorObj) {
    console.log(value);
}
    

Output:

        Batman: The Movie
Batman
Batman Returns

    

9. Iterate Over a Map’s Keys

The keys() method returns an Iterator object that contains all the keys in a Map, and it does this in insertion order.

        let mapObj = new Map([
    [1966, 'Batman: The Movie'],
    [1989, 'Batman'],
    [1992, 'Batman Returns']
]);
 
const iteratorObj = mapObj.keys();
 
for (let key of iteratorObj) {
    console.log(key);
}
    

Output:

        1966
1989
1992

    

Related: JavaScript Arrow Functions Can Make You a Better Developer

10. Iterate Over Elements in a Map Using a Callback

The forEach() method invokes a callback function for each element of the Map object. The callback function takes two parameters: the key and value.

        function printKeyValue(key, value) {
    console.log("Key: " + key + " Value: " + value);
}

let mapObj = new Map([
    [1966, 'Batman: The Movie'],
    [1989, 'Batman'],
    [1992, 'Batman Returns']
]);

mapObj.forEach(printKeyValue);
    

Output:

        Key: Batman: The Movie Value: 1966
Key: Batman Value: 1989
Key: Batman Returns Value: 1992

    

Now You Know About Maps in JavaScript

Now you have enough knowledge to master the concept of Maps in JavaScript. The Map data structure is widely used in many programming tasks. Once you've mastered it, you can move on to other native JavaScript objects like Sets, Arrays, and so on.