DEV Community

Cover image for Introduction to ES6 Map objects
Naftali Murgor
Naftali Murgor

Posted on • Updated on

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')
Enter fullscreen mode Exit fullscreen mode

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

const studentDetails = {
  age: 25, // made up
  class: 2018,
  name: 'Naftali Murgor',
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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' }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

4. Map.size

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

console.log(studentDetails.size) // 4
Enter fullscreen mode Exit fullscreen mode

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' } 
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

7. map.get()

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

console.log(studentDetails.get('age')) // 25
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)