DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Built-in Map Object
Moazam Ali
Moazam Ali

Posted on

Built-in Map Object

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Β 

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Β 

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
Enter fullscreen mode Exit fullscreen mode

Β 

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

Enter fullscreen mode Exit fullscreen mode

Β 

Wrapping up!

That's all for this post, thanks for reading. Catch you later.

πŸ’» Happy Coding

Top comments (0)

Classic DEV Post:

Understanding git through images