What are map objects in Javascript? with examples

Introduction

The Map objects are collections of key-value pairs. The key in a map is unique and you can have any value like a string, object or primitive value as a key.

The map is similar to normal objects, however, in objects, a key must be a string. We cannot have, for example, an integer as a key in an object. Let’s look at an example:

let obj = {
    fName: "Mickey"
};

console.log(obj.fName); // Mickey

Now, if we want to add a new property to object obj we can do so using the dot syntax:

obj.lName = "Mouse";
console.log(obj.lName); // Mouse

This will create a key lName and assign it a value Mouse. The key lName, however, is a string. What if we want to have an integer as a key? Let’s try it out:

obj.1 = "Mouse"; // Uncaught SyntaxError: Unexpected number

As you can see we cannot have an integer as a key in an object. But if you use a square bracket [] notation to declare the key, it works. But it is important to understand the key will still be a string and not an integer.

let obj = {
    fName: "Mickey"
};

obj[1] = "Mouse"; 

console.log(obj); // {1: 'Mouse', fName: 'Mickey'}

console.log(obj["1"]); // Mouse

Let’s see how the map object differs from Objects.

Create a map object

To create a map object we make use of the new Map() constructor.

let map = new Map();

We use the set method to add a key-value pair.

let map = new Map();

map.set('fName', 'Mickey');

console.log(map); // {'fName' => 'Mickey'}

Now let’s create a key that is an integer.

map.set(1, 'Mouse');

console.log(map); // {'fName' => 'Mickey', 1 => 'Mouse'}

Retrieve value using the get() method

To retrieve a value of a key in a map object we make use of the get() method.

let map = new Map();

map.set('fName', 'Mickey');

let actor = map.get('fName');

console.log(actor); // Mickey

Size of a map object

To get the size of a map object we can use the size property.

let map = new Map();

map.set('fName', 'Mickey');
map.set('lName', 'Mouse');
map.set('age', '10');

console.log(map.size); // 3

Remove a key from the map object

To remove a key-value pair from a map we can make use of the delete() method that takes the key that you want to delete as the argument.

let map = new Map();

map.set('fName', 'Mickey');
map.set('lName', 'Mouse');
map.set('age', '10');

console.log(map); // {'fName' => 'Mickey', 'lName' => 'Mouse', 'age' => '10'}

map.delete('fName');

console.log(map); // {'lName' => 'Mouse', 'age' => '10'}

Delete all entries in a map using clear() method

To delete all the entries from a map object we can use the clear() method.

let map = new Map();

map.set('fName', 'Mickey');
map.set('lName', 'Mouse');
map.set('age', '10');

console.log(map); // {'fName' => 'Mickey', 'lName' => 'Mouse', 'age' => '10'}

map.clear();

console.log(map); // {}

List all the keys in a map object

The map object uses the key() method to list all the keys declared in a map object.

let map = new Map();

map.set('fName', 'Mickey');
map.set('lName', 'Mouse');
map.set('age', '10');

console.log(map.keys()); // {'fName', 'lName', 'age'}