Understanding Map Objects In Javascript

Map Is very similar to Objects, It lets you store key-value pairs but it also remembers the original insertion order, so when we perform iteration on it, the map always iterates in the order of original entry insertion. and it provides us with various properties and methods power, which helps us to set, get, loop, search for data and check data size respectively as demonstrated below.

Lets understand The Map objects with the given sample code below:

const map1 = new Map(); // This creates a new 'Map' object.

map1.set('keyA', 1);

map1.set('keyB', 2);

map1.set('keyC', 3);

console.log(map1.get('keyA')); // Expected output: 1

map1.set('keyA', 97);

console.log(map1.get('keyA')); // Expected output: 97

console.log(map1.size); // Expected output: 3

map1.delete('keyB');

console.log(map1.size); // Expected output: 2

Storing Data: In the above code, we are storing data in the Map by using set(key, value) method.

Deleting Data: In order to delete the targeted data we are using delete(key) method.

Finding the length of stored data: In order to find the length, we are using size property of Map, which then returns the number of key/value pairs stored.

lets understand Map in more details with the help of code syntaxes below:

const myMap = new Map(); //This creates a new 'Map' object.

const keyString = 'a string'; //Storing string type of value in const type of variable.

const keyObj = {}; //Storing object as a value in const type of variable.

const keyFunc = function() {}; //Storing function as a value in const type of variable.

// setting the values below with the set method and using the above variables as keys.

myMap.set(keyString, "value associated with 'a string'"); // setting the values of string type.

myMap.set(keyObj, 'value associated with keyObj'); // setting the values of string type.

myMap.set(keyFunc, 'value associated with keyFunc'); // setting the value of string type.

console.log(myMap.size); // used size property here to calculate length/size ,this will log: 3.

console.log(myMap.get(keyString)); // this will log: "value associated with 'a string'".

console.log(myMap.get(keyObj)); // this will log: "value associated with keyObj". console.log(myMap.get(keyFunc)); // this will log: "value associated with keyFunc".

console.log(myMap.get('a string')); // this will log: "value associated with 'a string'", because keyString === 'a string'.

console.log(myMap.get({})); // this will log: undefined, because keyObj !== {}. console.log(myMap.get(function() {})); // this will log: undefined, because keyFunc!==function() {}.

Iterating Map with for...of

Maps can be iterated using a for...of loop:

const myMap = new Map();

myMap.set(0, 'zero');

myMap.set(1, 'one');

for (const [key, value] of myMap) {

console.log(${key} = ${value});

} // 0 = zero // 1 = one

for (const key of myMap.keys()) {

console.log(key);

} // 0 // 1

for (const value of myMap.values()) {

console.log(value);

} // zero // one

for (const [key, value] of myMap.entries()) {

console.log(${key} = ${value});

} // 0 = zero // 1 = one

Important note:

Setting object properties

Setting Object properties works for Map objects as well, and can cause considerable confusion.

Therefore, this appears to work in a way:

const wrongMap = new Map();

wrongMap['bla'] = 'blaa';

wrongMap['bla2'] = 'blaaa2';

console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }

But that way of setting a property does not interact with the Map data structure. It uses the feature of the generic object. The value of 'bla' is not stored in the Map for queries. Other operations on the data fail:

wrongMap.has('bla') // false

wrongMap.delete('bla') // false

console.log(wrongMap) // Map { bla: 'blaa', bla2: 'blaaa2' }

The correct usage for storing data in the Map is through the set(key, value) method.

Thanks, Happy coding.