Built-in Map Object
Tags: javascript, beginners, programming, tutorial
Published: 2022-10-15 09:36:32

## 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).

&nbsp;
### 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()`

&nbsp;
### Using new Map()

To create a JavaScript Map object you need to pass an array to `new Map()` constructor. For example,

```js
// 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()`.

&nbsp;
### 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,

```js
// 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,

```js
// 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
```

&nbsp;
## Getting object properties

In order to retrieve a value from the Map object you need to use the `Map.get()` method.

```js
// 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.

&nbsp;
## Getting object size

`Map.size` property returns the size of the object. For example,

```js
// 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.

&nbsp;
## 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,

```js
// 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,

```js
// 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
```

&nbsp;
## 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, 

```js
// 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
```


&nbsp;
## 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,

```js
// 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

```

&nbsp;
## Wrapping up!

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

#####💻 Happy Coding

---

{% user moazamdev %}