Map
Map objects are JavaScript built-in objects that were introduced in JavaScript ES6 version. Map objects are used to hold collections of key-value pairs and remember the keys' original insertion order where keys or values can be any datatype (both object and primitive values).
Creating a map object
JavaScript map objects can be created in two ways,
- Passing an array to
new Map() - Create a Map object and using
Map.set()
Using new Map()
To create a JavaScript Map object you need to pass an array to new Map() constructor. For example,
// creating a Map object
const colors = new Map([
["red", 120],
["green", 90],
["blue", 180]
]);
// to access value of a key
console.log(colors.get("green")); // output: 90
Here we are passing an array to our constructor i.e. new Map().
Using Map.set()
Another way of creating a JavaScript Map object is by creating a map object using new Map() constructor and then adding elements to it by using Map.set() method. For example,
// creating a Map object
const colors = new Map();
// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);
// to access value of a key
console.log(colors.get("green")); // output: 90
Map.set() method gets two parameters first is the key and the second one is the value. We can also update the existing elements using Map.set() method. For example,
// creating a Map object
const colors = new Map();
// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);
// updating element
colors.set("green", 220);
// to access value of a key
console.log(colors.get("green")); // output: 220
Getting object properties
In order to retrieve a value from the Map object you need to use the Map.get() method.
// creating a Map object
const colors = new Map();
// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);
// to access value of a key
console.log(colors.get("green")); // output: 90
The key of the Map object should need to be passed to the Map.get() method and in return, it will give us the value associated with that key.
Getting object size
Map.size property returns the size of the object. For example,
// creating a Map object
const colors = new Map();
// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);
// get size of object
console.log(colors.size); // output: 3
Map.size is a property so we don't need to pass anything to it.
Deleting object property
The Map.delete() method is used to delete the element from the map object. We just need to pass the key of the property to the Map.delete() method. For example,
// creating a Map object
const colors = new Map();
// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);
// deleting property
colors.delete("green");
// accessing the property
console.log(colors.get("green")); // output: undefined
To delete all the object properties we can use the Map.clear() method, which will empty the object. For example,
// creating a Map object
const colors = new Map();
// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);
// deleting all properties
colors.clear();
// get size of object
console.log(colors.size); // output: 0
Checking existence
To check if the element is present in the object or not, we can use the Map.has() method which takes the key of the element. The output would be either true or false. For example,
// creating a Map object
const colors = new Map();
// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);
// checking existence
console.log(colors.has("green")); // output: true
Iterating Map with forEach()
Map objects can be iterated using the Map.forEach() method. Map.forEach() invokes a callback for each key/value pair in a Map. For example,
// creating a Map object
const colors = new Map();
// adding key-value pairs
colors.set("red", 120);
colors.set("green", 90);
colors.set("blue", 180);
// iterating over map
colors.forEach((value, key) => {
console.log(`${key} = ${value}`);
});
// output:
// red = 120
// green = 90
// blue = 180
Wrapping up!
That's all for this post, thanks for reading. Catch you later.
Top comments (0)