Maps are used to store the unique values in a key value format.
Before ES6
Prior to the introduction of Javascript Map, developers used to have a workaround to handle the key value pair but there was limitations to that workaround. Let us see the workaround first to see why there was need for the Maps.
var map = {};
map.foo = "bar";
// retrieving a value
let value = map.foo;
console.log(value);This approach works fine but if the situation gets more complex when we run into the limitations of the object properties.
var map = {};
map[5] = "bar";
console.log(map["5"]);Object internally converts anything to string to store the values. So the numeric 5 is converted to “5". Thus we cannot use numeric key. The same happens when we use `objects` as the key.
var map = {};
var key = {};
var key2 = {};
map[key] = 'sujay';
console.log(map[key2]); // sujayIt converts the object to string.
Maps with falsy key were also difficult to handle.
var map = {};
map.foo = false;
// checking for the existense of "foo" or a nonzero value ?
if(map.foo) {
// ...
}Here we want to check if value is present inside the key “foo” but the falsy value is automatically converted to false.
Note: We could use in operator, but that still check in the prototype of the objects, which makes it only safe to use when an object has a null prototype.
After ES6
Maps are ordered list of key value pair where key as well as value can be of any type.
let map = new Map([iterable]);If an iterable object like Array(arrays with two elements, eg. [[1, ‘one’], [2, ‘two’]] whose elements are key value pairs is passed then all its items will be added to map.
Null values are treated as undefined.
// Map.prototype.constructor - Returns the function that created an instance's prototype.
let map = new Map();
// Map.prototype.set(key, value) - Add the value for the key and returns the Map object.
map.set(5, 'sujay');
map.set('5', 'sanket');
// Map.prototype.size - Returns the size of the map.
console.log(map.size); // 2
// Map.prototype.get(key) - Returns value of item with given key, undefined otherwise.
console.log(map.get(5)); //sujay
console.log(map.get('5')); // sanket
let map2 = new Map([["name", "sujay"], ["age", 23]]);
console.log(map2.size); // 2
console.log(map2.get('name')); // 'sujay'We can also use objects as the key:
let map = new Map();
let key1 = {};
let key2 = {};
map.set(key1, 'sujay');
map.set(key2, 'sanket');
console.log(map.size); // 2
console.log(map.get(key1)); // 'sujay'
console.log(map.get(key2)); // 'sanketFinding item in Map
// Map.prototype.has(key) - Returns true if item with given key is present, false otherwise.
console.log(map.has(key)); // true
console.log(map.has(null)); // true
console.log(map.has(key2)); // true
console.log(map.has(0)); // falseAlways pass objects as keys by storing it in variables let key = {a : 0, b: 1};
Removing an item with the given key from the map
map.delete(key);
map.delete(null);
console.log(map.has(key)); // false
console.log(map.has(null)); // falseIterating with maps:
Simple iterations
map.forEach((value, key, ownerMap) => {
console.log(key + " " + value);
console.log(ownerMap === map);
});
/*
1 sujay
true
2 sanket
true
3 pranay
true
4 kalpataru
true
5 prateek
true
6 vivek
true
7 moku
true
*/Using for of loop
for (const [key, val] of map) {
console.log(key, val);
}
/*
1. "sujay"
2. "sanket"
3. "pranay"
4. "kalpataru"
5. "prateek"
6. "vivek"
7. "moku"
*/Using Map.prototype.keys()
for (var key of map.keys()) {
console.log(key);
}
/*
1
2
3
4
5
6
7
*/Using Map.prototype.keys()
for (var key of map.keys()) {
console.log(key);
}
/*
1
2
3
4
5
6
7
*/Using Map.prototype.values()
for (var key of map.values()) {
console.log(key);
}
/*
sujay
sanket
pranay
kalpataru
prateek
vivek
moku
*/Using Map.prototype.entries()
We can destructure the value to access them seperately
for (let [key, value] of map.entries()) {
console.log(key + ' = ' + value);
}
/*
1 = sujay
2 = sanket
3 = pranay
4 = kalpataru
5 = prateek
6 = vivek
7 = moku
*/
Pingback: Javascript - ES6 Features - xplor4r