Javascript Map()

Map() is a built-in JavaScript object that allows you to create a collection of key/value pairs, similar to a JavaScript object or an associative array. The main difference between a Map() and a JavaScript object is that the keys in a JavaScript object can only be strings or symbols, whereas in a Map(), they can be any value (including functions, objects, and any primitive data type).

The Map() the object is created using the new Map() constructor and can be initialized with an iterable object, such as an array, as the argument.

The Map() object has various useful methods such as set(), get(), has(), delete(), clear(), size, keys(), values(), entries() and forEach() which can be used to manipulate the map.

It is supported in modern JavaScript versions such as ECMAScript 6 (ES6) and later and supported in most modern web browsers such as Google Chrome, Firefox, Edge, Safari, and Opera. Internet Explorer does not support Map() out-of-the-box, but you can use a polyfill library to add support for it in older versions of Internet Explorer.

Map() object is useful in a variety of situations

• Storing unique keys: Since the keys in a Map() can be any value, they can be used to store unique keys that cannot be used as property names in a JavaScript object, such as objects or functions.
• Quick Lookup: Map() provides fast O(1) lookups of values based on their keys, making it a good choice for situations where you need to look up values frequently, such as caching.
• Iteration: The Map() object allows you to easily iterate over its keys, values, or key-value pairs using the forEach(), keys(), values(), and entries() methods.
• Keeping order: Map() maintains the insertion order of elements, so it can be used to store data in the order it was added.
• Working with large data sets: Map() allows you to work with large data sets because it does not have the same limitations as JavaScript objects when it comes to the maximum number of properties.
• Working with non-string keys: Map can work with any type of key, whereas object only allows string or symbol keys.
• Working with map-like data: Map() is a natural fit for working with data that is naturally expressed as key-value pairs, such as dictionaries or hash maps.

Examples

let map = new Map();
map.set('name', 'John');
map.set('age', 30);
console.log(map.get('name'));  // Output: "John"
console.log(map.get('age'));  // Output: 30
 

This example creates a new Map object and sets two key/value pairs, one for the key ‘name’ and value ‘John’, and another for the key ‘age’ and value 30.

You can also create a Map by passing an iterable object, such as an array, as the argument to the constructor.

Example of using the Map() object with an array of objects

let students = [
    { name: "John", age: 20 },
    { name: "Jane", age: 22 },
    { name: "Bob", age: 18 }
];
let studentMap = new Map();
for (let i = 0; i < students.length; i++) {
    studentMap.set(students[i].name, students[i]);
}
console.log(studentMap.get("John")); // Output: { name: "John", age: 20 }
console.log(studentMap.get("Jane")); // Output: { name: "Jane", age: 22 }
console.log(studentMap.has("Bob")); // Output: true
console.log(studentMap.size); // Output: 3
 

In this example, we have an array of objects representing students, where each object has a name and age property. We then create a new Map() object and use a for loop to iterate through the array of students.

For each student, we call studentMap.set(student.name, student) which adds the student’s name as the key and the entire student object as the value.

We can then use the get() method to retrieve a student object by its name, the has() method to check if a student with a specific name is present in the map, and the size property to check the number of key-value pairs in the map.

You can also use the forEach() method to iterate through the Map object

studentMap.forEach(function(student, name) {
    console.log(name + " is " + student.age + " years old.");
});
// Output
/*
John is 20 years old.
Jane is 22 years old.
Bob is 18 years old.
*/ 

You can also use the keys(), values(), and entries() methods to get an iterable object of the keys, values, or key-value pairs in the map respectively.