Should You Stop Using Objects and Arrays to Store Data?
By: Anurag Kanoria
Tags: JavaScript, Web Development, Software Development, Coding, Programming

Initialising and Declaring Map

Similar to Set, Map can also be declared in the same fashion.

const map = new Map();

Adding and Removing Elements from Map

The Map supports the object-like key-value pairs. Therefore, when adding value, we need to provide a key as well.

This is different from what we saw with the Set.

const map = new Map(); map.set('Name', 'iPhone'); // map.set(key,value) format map.set('Brand', 'Apple'); map.set('Price', '$1000');

To remove a value from the Map, we can simply pass the key into the .delete() property.

const map = new Map(); map.set('Name', 'iPhone'); map.set('Brand', 'Apple'); map.set('Price', '$1000'); map.delete('Price'); //removes the element with key 'Price'

Like Set, we can use .clear() to remove all the elements.

map.clear() // removes all the element

Size of Map

The size(length) of the map can easily be retrieved using the .size property.

const map = new Map(); map.set('Name', 'iPhone'); map.set('Brand', 'Apple'); map.set('Price', '$1000'); console.log(map.size)//=> 3

Accessing Elements in Map

The Map provides us with a .get() method to quickly get the value by passing the key as an argument in the method.

const map = new Map(); map.set('Name', 'iPhone'); map.set('Brand', 'Apple'); map.set('Price', '$1000'); console.log(map.get('Name')); //iPhone console.log(map.get('Brand')); // Apple

But what if you want only the keys, values, or both key and value?

Map has .keys() , .values() and .entries() respectively for achieving the same.

Using the same map from the code above,

console.log(map.keys());

// iterator {'Name','Brand',Price'} console.log(map.values());

// iterator {'iPhone','Apple','$1000'} console.log(map.entries());

//iterator {'Name':'iPhone','Brand':'Apple',Price':'$1000'}

Iterating over the map is also quite simple.

//with for-each

map.forEach((value, key) => {

console.log(`${key} is ${value} years old!`);

});



// with for-of

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

console.log(`${key} : ${value}`);

}

Moreover, you can easily check if an element exists or not using .has() property and passing the key.

var map = new Map();

map.set('age',19); console.log(map.has('age')) // true since 'age' key is present

Converting Object into a Map

If you decide to convert your object to a map, JavaScript has got you covered.

We have earlier used .entries() to get all the key-value pairs but this time we are gonna use the method on Object .

const myObject= {

'Age': '25',

'Gender': 'Male',

'Nationality': 'Australian'

};



const myMap = new Map(Object.entries(myObject)); //object to map const anotherObject = Object.fromEntries(myMap) // map to object

You can easily convert a map to an object as well as shown above.

To convert the map into an array we can use the Array.from(myMap) .

Map vs Array & Objects

The Map seems to solve a lot of shortcomings of the array and objects such as able to handle much more complex operations.

The Map is like a hybrid of array and objects. It has a size property like array and can store elements in a key-value pair format.

Besides this, it also provides methods to like .has() to check if an element exists or not which can save you a ton of time.

Moreover, it does not necessarily need the key to be of String type. You can even use an object as a key that can help you write better code.

You can a much more detailed guide here.