JavaScript map object

In JavaScript, we have two types of maps first is a functional map and a class map. In this article, we will know about class maps.

What is a functional map?

map() is the higher-order array method, When we want to iterate or loop an array, We use the functional map.

What is an object?

The object is a collection of key-value pairs.

1 . What is the map object?

The map is a collection of key-value pairs that can use any type of data as a key or value. The key field in Map can be of any data type such as a number, array, or object. A map remembers the original order of insertion order of the key.

A map is an advanced object with new features and better performance.

2 . How can you create a map object?

A map can be created using the map constructor.

const mapObj = new Map([
    ['name' , 'vinayak singh'],
    [10 , 'this is a number value'],
    [true , 'this is boolean value'],
])
console.log(mapObj.get(10))  //this is a number value

We can set the value using an array of arrays, and the inner array can contain a key and a value, and the key can be of any data type such as a string, number, boolean etc.

3 . How can you manipulate an item of a map object?

In Map, we have set(), get() and delete() methods for manipulation.

set() - the set method used to add or update the value with a specified key and a value.

get() - the set method used to access elements.

delete() - delete method used to delete elements.

const myMap = new Map();
myMap.set( 1 , "one");
myMap.set( 2 , "two")
console.log(myMap.get(1))   // one
myMap.delete(1) 
console.log(myMap)  // Map(1) { 2 => 'two' }

4 . How can you read the keys and values of your map object?

In the map, we have keys(), value() and entries() methods.

keys() - We can use keys() method to get list of keys. map.keys() returns an iterator with the key.

Here Array.from() just converts an object to an array.

const myMap = new Map([
    [ 1 , "One"],
    [ "Two" , 2],
    [ "Three" , "3"]
]);
console.log(myMap.keys())    //[Map Iterator] { 1, 'Two', 'Three' }
console.log(Array.from(myMap.keys()))   //[ 1, 'Two', 'Three' ]

values() - we can use values() method to get list of values. map.values() returns an iterator with the value.

const myMap = new Map([
    [ 1 , "One"],
    [ "Two" , 2],
    [ "Three" , "3"]
]);
console.log(myMap.values())   //[Map Iterator] { 'One', 2, '3' }
console.log(Array.from(myMap.values()))  //[ 'One', 2, '3' ]

entries() - map.entries() returns an object of Map iterator that contains the key-value pair for each element.

const myMap = new Map([
    [ 1 , "One"],
    [ "Two" , 2],
    [ "Three" , "3"]
]);
console.log(myMap.entries())  //[Map Entries] { [ 1, 'One' ], [ 'Two', 2 ], [ 'Three', '3' ] }
console.log(Array.from(myMap.entries()))  //[ [ 1, 'One' ], [ 'Two', 2 ], [ 'Three', '3' ] ]

5 . Get the length or the number of elements in the map.

We can get size or the number of elements of a map using size property.

const myMap = new Map([
    [ 1 , "One"],
    [ "Two" , 2],
    [ "Three" , "3"]
]);
console.log(myMap.size)  // 3

6 . How can you check if a key exists on the map?

In the map, we have has method. It returns a boolean value, If the key exists in the map, it returns true, otherwise, it returns false.

const myMap = new Map([
    [ 1 , "One"],
    [ "Two" , 2],
    [ "Three" , "3"]
]);
console.log(myMap.has("Two"))  // true
console.log(myMap.has(2))      // false

7 . What are the ways to iterate the elements in a map?

There are multiple ways to iterate over the element in the map.

we can use for..or loop or forEach loop

const myMap = new Map([
    [ 1 , "One"],
    [ "Two" , 2],
    [ "Three" , "3"]
]);
for(const [key , value] of myMap){
    console.log(` our key ${key} and value is ${value}`)
}
myMap.forEach((value , key)=>{
    console.log(` our key ${key} and value is ${value}`)
})

Points to remember

• A map object can not contain duplicate keys, but it can contain a duplicate value.

• The key and value can be any type(e.g.- number, boolean, string etc.).

• A map object iterates its elements in insertion order.

If I made any type of mistake in this article. So, I am sorry, And please give me your suggestion..!!!.

Thank you for reading 👏👏❤️.