Introduction to ES6 Map objects

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

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:

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:

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.

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.

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.

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.

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.

 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.

studentDetails.set('weight', 59)

7. map.get()

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

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