The JavaScript ES6 has introduced two new data structures, i.e Map and WeakMap.
Map is similar to objects in JavaScript that allows us to store elements in a key/value pair.
The elements in a Map are inserted in an insertion order. However, unlike an object, a map can contain objects, functions and other data types as key.
Create JavaScript Map
To create a Map, we use the new Map() constructor. For example,
Insert Item to Map
After you create a map, you can use the set() method to insert elements to it. For example,
You can also use objects or functions as keys. For example,
Access Map Elements
You can access Map elements using the get() method. For example,
Check Map Elements
You can use the has() method to check if the element is in a Map. For example,
Removing Elements
You can use the clear() and the delete() method to remove elements from a Map.
The delete() method returns true if a specified key/value pair exists and has been removed or else returns false. For example,
The clear() method removes all key/value pairs from a Map object. For example,
JavaScript Map Size
You can get the number of elements in a Map using the size property. For example,
Iterate Through a Map
You can iterate through the Map elements using the for...of loop or forEach() method. The elements are accessed in the insertion order. For example,
Output
name- Jack age- 27
You could also get the same results as the above program using the forEach() method. For example,
Iterate Over Map Keys
You can iterate over the Map and get the key using the keys() method. For example,
Output
name age
Iterate Over Map Values
You can iterate over the Map and get the values using the values() method. For example,
Output
Jack 27
Get Key/Values of Map
You can iterate over the Map and get the key/value of a Map using the entries() method. For example,
Output
name: Jack age: 27
JavaScript Map vs Object
| Map | Object |
|---|---|
| Maps can contain objects and other data types as keys. | Objects can only contain strings and symbols as keys. |
| Maps can be directly iterated and their value can be accessed. | Objects can be iterated by accessing its keys. |
The number of elements of a Map can be determined by size property. |
The number of elements of an object needs to be determined manually. |
| Map performs better for programs that require the addition or removal of elements frequently. | Object does not perform well if the program requires the addition or removal of elements frequently. |
JavaScript WeakMap
The WeakMap is similar to a Map. However, WeakMap can only contain objects as keys. For example,
When you try to add other data types besides objects, WeakMap throws an error. For example,
// throws error // TypeError: Attempted to set a non-object key in a WeakMap
WeakMap Methods
WeakMaps have methods get(), set(), delete(), and has(). For example,
WeakMaps Are Not iterable
Unlike Maps, WeakMaps are not iterable. For example,
JavaScript Map and WeakMap were introduced in ES6. Some browsers may not support their use. To learn more, visit JavaScript Map support and JavaScript WeakMap support.