JavaScript Map
The JavaScript Map object holds key-value pairs and preserves the original insertion order. It supports any value, including objects and primitives, as keys or values. This feature allows for efficient data retrieval and manipulation, making Map a versatile tool for managing collections.
On iterating a map object returns the key, and value pair in the same order as inserted. Map() constructor is used to create Map in JavaScript.
JavaScript Map has a property that represents the size of the map.
Example:
Input:
let map1 = new Map([
[1 , 10], [2 , 20] ,
[3, 30],[4, 40]
]);
console.log("Map1: ");
console.log(map1);
Output:
// Map1:
// Map(4) { 1 => 10, 2 => 20, 3 => 30, 4 => 40 }
Steps to Create a Map
- Passing an Array to
new Map() - Create a Map and use
Map.set()
Examples of JavaScript Map
new Map()
In this we use new Map() constructor,
Example: In this example, a Map named prices is created to associate product names with their respective prices, allowing for efficient retrieval and management of price information.
// Creating a Map for product prices
const prices = new Map([
["Laptop", 1000],
["Smartphone", 800],
["Tablet", 400]
]);
Map.set()
You can add elements to a Map with the set() method.
Example: In this example, the Map.set() method is employed to add product prices to the Map named prices.
// Creating a Map for product prices
const prices = new Map();
// Using Map.set() to add product prices
prices.set('Laptop', 1000);
prices.set('Smartphone', 800);
// The Map now contains { 'Laptop' => 1000, 'Smartphone' => 800 }
Example 1: In this example, we will create a basic map object
let map1 = new Map([
[1, 2],
[2, 3],
[4, 5]
]);
console.log("Map1");
console.log(map1);
let map2 = new Map([
["firstname", "sumit"],
["lastname", "ghosh"],
["website", "geeksforgeeks"]
]);
console.log("Map2");
console.log(map2);
Output
Map1
Map(3) { 1 => 2, 2 => 3, 4 => 5 }
Map2
Map(3) {
'firstname' => 'sumit',
'lastname' => 'ghosh',
'website' => 'geeksforgeeks'
}Example 2: This example adds elements to the map using set() method.
let map1 = new Map();
map1.set("FirstName", "Shobhit");
map1.set("LastName", "Sharma");
map1.set("website", "GeeksforGeeks");
console.log(map1);
Output
Map(3) {
'FirstName' => 'Shobhit',
'LastName' => 'Sharma',
'website' => 'GeeksforGeeks'
}Methods of JavaScript Map
- set(key, value): Adds or updates an element with a specified key and value.
- get(key): Returns the value associated with the specified key.
- has(key): Returns a boolean indicating whether an element with the specified key exists.
- delete(key): Removes the element with the specified key.
- clear(): Removes all elements from the Map.
- size: Returns the number of key-value pairs in the Map.
This example explains the use of Map methods like has(), get(), delete(), and clear().
let map1 = new Map();
map1.set("first name", "sumit");
map1.set("last name", "ghosh");
map1.set("website", "geeksforgeeks")
.set("friend 1","gourav")
.set("friend 2","sourav");
console.log(map1);
console.log("map1 has website ? "+
map1.has("website"));
console.log("map1 has friend 3 ? " +
map1.has("friend 3"));
console.log("get value for key website "+
map1.get("website"));
console.log("get value for key friend 3 "+
map1.get("friend 3"));
console.log("delete element with key website "
+ map1.delete("website"));
console.log("map1 has website ? "+
map1.has("website"));
console.log("delete element with key website " +
map1.delete("friend 3"));
map1.clear();
console.log(map1);
Output
Map(5) {
'first name' => 'sumit',
'last name' => 'ghosh',
'website' => 'geeksforgeeks',
'friend 1' => 'gourav',
'friend 2' => 'sourav'
}
map1 has website ? true
map1 has friend 3 ? false
get...
Advantages of Map
Map object provided by ES6. A key of a Map may occur once, which will be unique in the map’s collection. There are slight advantages to using a map rather than an object.
- Unique Keys: A key can occur only once, ensuring uniqueness within the collection.
- Security: No default keys are stored; only what is explicitly added, making it safer.
- Flexible Key Types: Any value (object, function, etc.) can be used as a key.
- Order: Maintains the order of entry insertion.
- Size Property: The size property makes it easy to retrieve the number of elements.
- Performance: Operations on Maps can be performed efficiently.
- Serialization and Parsing: Custom serialization and parsing support using JSON.stringify() and JSON.parse() methods.
JavaScript Maps provide a robust mechanism for handling key-value pairs, offering unique advantages over plain objects. With their secure, flexible, and efficient operations, Maps are an essential tool for modern web development. Coupled with the map() method for arrays, JavaScript offers versatile ways to manipulate and iterate over data collections effectively.
Supported Browsers
- Google Chrome 5.0
- Edge 12
- Mozilla 4.0
- Safari 5.0
- Opera 11.1
JavaScript Map – FAQs
What is a Map in JavaScript?
A Map is a built-in object that allows you to store key-value pairs. Unlike regular objects, which only allow string or symbol keys, a Map can have keys of any type, including objects, functions, and primitives.
How do you create a Map?
You can create a Map using the Map constructor.
Example: const myMap = new Map();
How do you add key-value pairs to a Map?
You can add key-value pairs to a Map using the set() method. This method takes two arguments: the key and the value.
Example: myMap.set(‘key’, ‘value’);
How do you get a value from a Map?
You can retrieve a value from a Map using the get() method. This method takes one argument, the key, and returns the associated value.
Example: myMap.get(‘key’);
How do you check if a key exists in a Map?
You can check if a key exists in a Map using the has() method. This method returns true if the key exists, and false otherwise.
Example: myMap.has(‘key’);
How do you remove a key-value pair from a Map?
You can remove a key-value pair from a Map using the delete() method. This method takes one argument, the key, and removes the associated key-value pair.
Example: myMap.delete(‘key’);
