JavaScript: Using the Map Object

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:

Map Methods

new Map()

Create a map object by passing an array of key/value pairs to the constructor:

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():

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:

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:

console.log(pets.size)

4

.has()

The .has() method will indicate whether or not a key exists in the Map object

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:

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:

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:

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:

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:

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:

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!