A short introduction to the Maps in Javascript
The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.
Let’s talk about the fact that we have a simple brandModel Car object.
let brandModelCar = { Tesla: "S", Ford: "Mustang", Citroen: "2CV"};How can we iterate the properties of that object?
We need to use functions like Objects.entries which returns an array with the properties key-value from the object.
let brandModelCar = { "Tesla": “S”, "Ford": “Mustang”, "Citroen": “2CV” };for (let [brand, model] of Object.entries(brandModelCar){
console.log(brand, model);
}// Output
Tesla S
Ford Mustang
Citroen 2CV
Another function than we can use is Object.keys for the keys which returns an array of a given object’s own enumerable property names.
let brandModelCar = { "Tesla": “S”, "Ford": “Mustang”, "Citroen": “2CV” };for (let brand of Object.keys(brandModelCar)) {
console.log(brand);
}// Output
Tesla
Ford
Citroen
Or Object.values for the values which returns an array of a given object’s own enumerable property values.
let brandModelCar = { "Tesla": “S”, "Ford": “Mustang”, "Citroen": “2CV” };for (let model of Object.values(brandModelCar)) {
console.log(model);
}// Output
S
Mustang
2CV
But the most simple option is,
new Map( [iterable] );
This object have one argument (iterable)
iterable -> Optional. An Array or other iterable object whose elements are key-value pairs (arrays with two elements, e.g. [[ 1, 'one' ],[ 2, 'two' ]]). Each key-value pair is added to the new Map.
So let´s create our object with a Map and then iterate,
let brandModelCar = new Map([
["Tesla", "S"],
["Ford", "Mustang"],
["Citroen", "2CV"]
]);for (let [brand, model] of brandModelCar) {
console.log(brand, model);
}// Output
Tesla S
Ford Mustang
Citroen 2CV
Problem with the object keys?
The keys of an Object are String and Symbol, whereas they can be any value for a Map, including functions, objects, and any primitive.
With Map, you can use any value as a key, even an object (see also WeakMap).
let brandModelCar = new Map([
[{ "1": "Tesla" }, "S"],
[{ "2": "Ford" }, "Mustang"],
[{ "3": "Citroen" }, "2CV"]
]);for (let [brand, model] of brandModelCar) {
console.log(brand, model);
}// Output
{ '1': 'Tesla' } 'S'
{ '2': 'Ford' } 'Mustang'
{ '3': 'Citroen' } '2CV'
Also with Mapyou can declare functions as keys like,
let brandModelCar = new Map([[callMe, “S”]]);function callMe() {
console.log(“Tesla”);
} for (let [brand] of brandModelCar) {
console.log(brand());
}
Problem determining the number of properties of an Object?
let brandModelCar = { "Tesla": “S”, "Ford": “Mustang”, "Citroen": “2CV” };console.log(Object.keys(brandModelCar).length); // 3
Map have the size property,
let brandModelCar = new Map([
[{ "1": "Tesla" }, "S"],
[{ "2": "Ford" }, "Mustang"],
[{ "3": "Citroen" }, "2CV"]
]);console.log(brandModelCar.size); // 3
In summary for Map
- The properties of the maps are much easier to iterate.
- Any value can be used as a key, either functions or objects.
- You can know the number of properties easily.
