Map data structure was introduced in ES6. It has a similar key-value pair syntax as the objects.
How to create a map
You can create a map by passing an array of the key-value pairs into the new Map constructor
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
console.log(fruits)
// Map(3) { 'apples' => 500, 'bananas' => 300, 'oranges' => 200 }
Alternatively, you can use set() method to add elements into the map.
const fruits = new Map();
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
console.log(fruits)
// Map(3) { 'apples' => 500, 'bananas' => 300, 'oranges' => 200 }
What are the differences between a map and object
Same as objects, maps store key, value pair elements. However, the two are significantly different
| Feature | Map | Objects |
|---|---|---|
| Keys | A map key can be any value. This includes objects, functions or primitives | Strictly, objects key must be a string or symbol data type |
| Lengh | Map has a size property which returns the length of the map | The length of an object can only be determined by iterating and counting all the elements manually |
| Iteration | Directly iterable | You cannot iterate an object directly. However you can do so by implementing other methods |
| Default keys | Map only contains keys that are explicitly declared. Hence, does not contain default keys | Since objects has a prototype, it contains default keys which can collide with other keys |
Map operations
- add element
set() method is used to add elements to a map. The set method receives the key-value pair of the new element as a parameter.
fruits.set("apples", 500);
- get element
get()method receives the a key parameter of the element
fruits.get("apples") // outputs 50
- Remove element
delete()method deletes element from the map.
fruits.delete("apples")
- Clear Map
clear()method removes all the elements from a map
fruits.clear()
- Trasverse a map
forEach()can be used to access the items in a list sequentially
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
fruits.forEach((key, value)=>{
console.log(key, value)
})
/*
output
apples 500
bananas 300
oranges 200
*/
keys() returns an iterable list of the keys. Similarly, values() returns an iterable list of the values
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
console.log(fruits.keys())
/*outputs
{ 'apples', 'bananas', 'oranges' }
*/
console.log(fruits.values())
/*outputs
{ 500, 300, 200 }
*/
entries() transverses the map and returns an array of key-value pair [key, values]
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
console.log(fruits.entries())
/*
{
[ 'apples', 500 ],
[ 'bananas', 300 ],
[ 'oranges', 200 ]
}
*/
- Find size of a map
sizeproperty returns the length of the map
fruits.size //outputs 3
Summary
Even though objects and maps look quite similar, they are quite different. Map have size property and the keys can be anything including functions and objects.
Objects do not have size property while the keys must be strictly strings.
Top comments (0)