Introduction to ES6 Map objects
Tags: javascript, webdev, node, tutorial
Published: 2022-01-25 20:26:39

## Introduction

In this blog article, we shall learn about map objects introduced in ES2015. Maps are key-value pairs, where the key can be of any type.

It's a typical practice in JavaScript to use Object literals as maps, most likely because Object literal predated Maps.

## Map objects

Map objects can be created using  `new Map()` syntax.

Sample code showing how to create a map object and add some values using `Map.set()`:

```typescript
const studentDetails = new Map()
studentDetails.set('age', 25)
studentDetails.set('class', 2018)
studentDetails.set('name', 'Naftali Murgor')
```

In object literal, the following would have been equivalent of the above:

```typescript
const studentDetails = {
  age: 25, // made up
  class: 2018,
  name: 'Naftali Murgor',
}
```

Map offers useful helper methods compared to using object literal. 

Some of the methods and properties include:

```typescript
const map = new Map()
// helper methods and properties
map.clear
map.delete
map.entries
map.forEach
map.get
map.has
map.keys
map.set
map.size
map.values
```
Let's explore some of the helper methods and properties.

### 1. `Map.clear()`

`Map.clear()` deletes the map values entries leaving an empty map.

```typescript
studentDetails.clear()
console.log(studentDetails) // Map(0) {} // all key-values cleared!
```

### 2. `Map.delete()`

`Map.delete('key')` deletes the value in the a map based on the key passed to as an argument. Returns `boolean` of `true` on succesful deletion or `false` on failure.

```typescript
studentDetails.delete('age') // remove age entry
console.log(studentDetails)// Map(2) { 'class' => 2018, 'name' => 'Naftali Murgor' }
```

### 3. `Map.has('key')`

Checks if a key exists in a map. Returns boolean. `true` if key is existent and `false` otherwise.

```typescript
console.log(map.has('class')) // true
console.log(map.has('height')) // false
```

### 4. `Map.size`

`Map.size` is a getter that returns the number of entries in the map object.

```typescript
console.log(studentDetails.size) // 4
```

### 5. `Map.keys`

`Map.keys` is a getter that returns a `Map iterator` that contains all the keys of the map object.

```typescript
 console.log(studenDetails.keys()) // Map iterator { 2018, 'Naftali Murgor' } 
```

### 6. `Map.set()`

`Map.set('key', 'value')` method takes a `key` and `value` as arguments and adds new entry to the map object.

```typescript
studentDetails.set('weight', 59)
```

### 7. `map.get()`

`Map.get('key')` returns the value associated with the key passed as an argument.

```typescript
console.log(studentDetails.get('age')) // 25
```

## Summary
1. Map objects are key-value pairs, where a key is associated with a value. Maps are called a `dictionary`, a `HashMap` in other languages.

2. We create a map object by using new Map(). We then add key-value pairs using `Map. set(‘key’, ‘value’)`

3. Object literals are a common style of using maps. In JavaScript, we use Object literal as a map, how hilarious is that. However, Object literals provide methods that aren’t useful. The takeaway is that the JSON interface and JSON encoding/decoding are interoperable with object literals.


Read more about 👉 [Set Objects](/es6-set-objects/)