Search⌘ K
Home
Courses
Building Front-End Web Applications with Plain JavaScript

Maps

Explore the concept of maps in JavaScript and how they differ from traditional objects used as maps. Understand key operations such as adding, deleting, searching, and cloning map entries. Gain practical knowledge on when to use the Map object for better performance and code clarity.

We'll cover the following...

What are maps?

A map’hash map’, ‘associative array’ or ‘dictionary’ provides a mapping from keys to their associated values. Traditionally, before the built-in Map object was added to JS (in ES6), maps were implemented in the form of plain JS objects. In these plain JS objects, the keys were string literals that could include blank spaces, as shown below:

Javascript (babel-node)
var myTranslation = { 
    "my house": "mein Haus", 
    "my boat": "mein Boot", 
    "my horse": "mein Pferd"
}
console.log(myTranslation)

Alternatively, a proper map can be constructed with the help of the Map constructor:

Javascript (babel-node)
var myTranslation = new Map([
    ["my house", "mein Haus"], 
    ["my boat", "mein Boot"], 
    ["my horse", "mein Pferd"]
])
console.log(myTranslation)

Operations on maps

Let’s look at some map operations. ...