JavaScript Maps
About JavaScript Map
JavaScript map is a collection of key-value pairs.
Map maintains insertion order of key-value pairs.
Unlike object, a map can use any data type as a key, including objects, functions, or even another map.
Map provides methods like .keys(), .values(), .entries() to iterate over keys, values, or key-value pairs respectively.
Creating JavaScript Map
JavaScript maps can be created using Map() constructor.
Using the Map Constructor:
An empty map can be created using map constructor 'new Map()' and then key-value pairs can be added to the map with the set() method as demonstrated in the following example:
Example of Creating Map Using Map Constructor
Explanation of the code
-
let myMap = new Map();: This line creates an empty map named ‘myMap’ using Map constructor. -
myMap.set('name', 'John');: This line adds a key-value pair to the map 'myMap'. Here 'name' is the key and 'John' is the value. -
console.log(myMap);: This line of code prints the 'myMap' in the console.
Initializing a Map Constructor with Key-Value Pairs(Array of Key-Value Pairs):
A map can be created by passing Key-Value Pairs as argument to the Map constructor at the time of declaration.
Example of Creating Map with Key-Value Pairs
Explanation of the code
-
let myMap = new Map([['name', 'John'], ['age', 22]]): This line creates a map named ‘numArray’ initializing the map with an array of key-value pairs[['name', 'John'], ['age', 22]]. -
console.log(myMap);: This line of code prints the 'myMap' in the console.
Adding a Key-Value Pair to a Map
The set() method is used to add a key-value pair to a map as demonstrated in the following example:
Example of Adding Key-Value Pair to a Map
Deleting a Key-Value Pair from a Map
The delete(key) method is used to delete a key-value pair from a map and the method takes key as an argument as demonstrated in the following example:
Example of Deleting Key-Value Pair from a Map
Size Property of Map
The size property returns the number of key-value pairs in a map as demonstrated in the following example:
Example of Size Property of Map
Iterating Over a Map
A map is iterable and it can be iterated in key-value pairs using for...of loop as demonstrated in the following example:
Example of Iterating Over Key-Value Pairs of a Map
Output of the above example
name John
age 22
city London
Example of Iterating Over Keys of a Map
Output of the above example
name
age
city
Example of Iterating Over Values of a Map
Output of the above example
John
22
London
Methods of Map Object (Advanced Level)
1. set(key, value):
The set() method adds or updates a key-value pair. It takes two arguments - first one is the key and second one is the value.
Example of Set() Method
2. get(key):
The get() method retrieves the value of a specified key.
Example of get() Method
3. has(key)():
The has() method checks whether the map contains the specified key and returns a Boolean value- true or false.
Example of has() Method
4. delete(key):
The delete() method removes a key-value pair from the map.
Example of delete() Method
5. clear():
The clear() method removes all key-value pairs from the map.
Example of clear() Method
6. keys():
The keys() method returns an iterator for the keys in a map.
Example of keys() Method
Output of the above example
name
age
city
6. values():
The values() method returns an iterator of values in a map.
Example of values() Method
Output of the above example
John
22
London
7. entries():
The entries() method returns an iterator for the [key, value] pairs in a map.
Example of entries() Method
Output of the above example
name John
age 22
city London
8. forEach(callback):
The forEach() method iterates over the map and executes a callback function for each key-value pair.
Example of forEach() Method
Output of the above example
name : John
age : 22
city : London
Explanation of the code
-
personMap.forEach((value, key) => console.log(key + ' : ' + value));: HereforEachmethod iterates over the map 'personMap' and executes the function(value, key) => console.log(key + ' : ' + value)for each key-value pair of the map. The function prints the key and value in the console.
JavaScript Compiler For Live Practice
Practice the above JavaScript code in the following JavaScript Editor. Create more JavaScript maps and experiment with different map methods in the following editor and click Execute button to check the output. The output will be displayed in JavaScript Code Output section.
JavaScript Editor