JavaScript:  Using the Map Object
Tags: javascript, map, programming
Published: 2022-03-01 05:04:08

The Map object in JavaScript bears a strong resemblance to the standard Object that uses key/value pairs.  However, it comes with its own set of methods that makes key/value pairs a breeze to work with, and in some cases provides distinct advantages over standard objects.

Here's a quick summary of the differences between the Map object and an Object object:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j15i1r0fz1ihn1sifda1.png)
 

## Map Methods

### new Map()
Create a map object by passing an array of key/value pairs to the constructor:

```javascript
let pets = new Map([
  ["dog", "Fido"],
  ["cat", "Milo"],
  ["bird", "Polly"]
])
console.log(pets)
```
```
Map(3) { 'dog' => 'Fido', 'cat' => 'Milo', 'bird' => 'Polly' }
```
### .set()
You can add new key/value pairs to a Map object with `.set()`:
```javascript
pets.set("turtle", "Yertle")
console.log(pets)
```
```
Map(4) {
  'dog' => 'Fido',    
  'cat' => 'Milo',    
  'bird' => 'Polly',  
  'turtle' => 'Yertle'
}
```

### .get()
Use the `.get()` method to use the key to get a value:
```javascript
let myTurtle = pets.get("turtle")
console.log(myTurtle)
```
```
Yertle
```
### .size
The size property will give you the number of key/value pairs in your Map object:
```javascript
console.log(pets.size)
```
```
4
```
### .has()
The `.has()` method will indicate whether or not a key exists in the Map object
```javascript
console.log(pets)
console.log(pets.has("cat"))
console.log(pets.has("armadillo"))
```
```
Map(4) {
  'dog' => 'Fido',
  'cat' => 'Milo',
  'bird' => 'Polly',
  'turtle' => 'Yertle'
}
true
false
```
### .forEach()
`.forEach()` will invoke a callback function for each key/value pair:
```javascript
let petList = ""
pets.forEach( (value, key) => {
    petList += key + ": " + value + "\n"
})
console.log(petList)
```
```
dog: Fido
cat: Milo
bird: Polly
turtle: Yertle
```
### .entries()
`.entries()` returns an iterator object that includes the key/value pairs:
```javascript
let petList = ""
for (const pet of pets.entries()) {
  petList += pet + "\n"
}
console.log(pets.entries())
console.log(petList)
```
```
[Map Entries] {
  [ 'dog', 'Fido' ],    
  [ 'cat', 'Milo' ],    
  [ 'bird', 'Polly' ],  
  [ 'turtle', 'Yertle' ]
}
dog,Fido
cat,Milo
bird,Polly
turtle,Yertle
```
### .keys()
`.keys()` returns an iterator object that contains the Map object's keys:
```javascript
console.log(pets.keys())

let petsKeys = ""
for (const pet of pets.keys()) {
  petsKeys += pet + "\n"
}
console.log(petsKeys)
```
```
[Map Iterator] { 'dog', 'cat', 'bird', 'turtle' }
dog
cat   
bird  
turtle
```
### .values()
`.values()` returns an iterator object that contains the Map object's values:
```javascript
console.log(pets.values())

let petsValues = ""
for (const pet of pets.values()) {
  petsValues += pet + "\n"
}
console.log(petsValues)
```
```
[Map Iterator] { 'Fido', 'Milo', 'Polly', 'Yertle' }
Fido
Milo
Polly
Yertle
```

### .delete()
`.delete()` removes an element from a Map object:
```javascript
console.log(pets.entries())
pets.delete("bird")
console.log(pets.entries())
```
```
[Map Entries] {
  [ 'dog', 'Fido' ],    
  [ 'cat', 'Milo' ],    
  [ 'bird', 'Polly' ],  
  [ 'turtle', 'Yertle' ]
}
[Map Entries] {
  [ 'dog', 'Fido' ],    
  [ 'cat', 'Milo' ],    
  [ 'turtle', 'Yertle' ]
```
### .clear()
And finally, `.clear()` removes all the elements from the Map object:
```javascript
console.log(pets)
pets.clear()
console.log(pets)
```
```
Map(4) {
  'dog' => 'Fido',    
  'cat' => 'Milo',    
  'bird' => 'Polly',  
  'turtle' => 'Yertle'
}
Map(0) {}
```
With all these useful methods, the Map object provides an efficient and intuitive interface for working with key/value pairs.  Consider implementing one in place of the standard object in your next application!

Happy Coding!