Map

new Map()
.set(key, value)
.get(key)

Maps in JS

Kacper Walczak · 07-11-2023

Learn how to use Map in JS, interesting usage.

What is map in JS?

A map is a collection of keyed data items, just like an Object. But the main difference is that Map allows keys of any type.

const map = new Map();
 
map.set("1", "str1");
map.get("1"); // str1
map.delete("1");

Pass object as a key

We don't have to use only strings as keys. We can use objects as keys.

class Person {
    constructor(id) {
        this.id = id;
    }
}
 
const person = new Person(1);
const personsMap = new Map();
personsMap.set(person, person);
 
// some time later
console.warn(personsMap.get(person)); // Person: { "id": 1 }

Real world example

We can store data in the Map associated with the current user.

And when the user leaves, we can easily delete all data related to it.

const user = { name: "John" };
const visitsCountMap = new Map();
 
visitsCountMap.set(user, 1);
 
console.warn(visitsCountMap.get(user)); // 1
 
// delete all data related to the user
visitsCountMap.delete(user);

Regular object vs Map

const map = new Map();
 
map.set("1", "str1"); // a string key
map.set(1, "num1"); // a numeric key
map.set(true, "bool1"); // a boolean key
 
// remember the regular Object? it would convert keys to string
 
const obj = { 1: "num1" };
 
// That's why they are different:
console.warn(map.get(1)); // 'num1'
console.warn(obj["1"]); // 'num1'
 
// Map keeps the type:
console.warn(map.get(1)); // 'num1'
console.warn(map.get("1")); // 'str1'

Chaining

const map = new Map();
 
map
    .set("1", "str1")
    .set(1, "num1")
    .set(true, "bool1");
 
console.log(map.values()) // MapIterator {'str1', 'num1', 'bool1'}

Properties

Symbol.species

According to MDN documentation (opens in a new tab) The @@species property returns the default constructor function, which is the Map constructor for Map.

const map = new Map();
console.warn(map[Symbol.species]); // [Function: Map]

size

const map = new Map();
map.set("1", "str1");
console.warn(map.size); // 1

Methods

Symbol.iterator

const map = new Map();
map.set("1", "str1");
for (const item of map[Symbol.iterator]()) {
console.warn(item); // [ '1', 'str1' ]
}

clear

const map = new Map();
map.set("1", "str1");
map.clear();

delete

const map = new Map();
map.set("1", "str1");
map.delete("1");

entries

const map = new Map();
map.set("1", "str1");
console.warn(map.entries()); // [Map Entries] { [ '1', 'str1' ] }

forEach

const map = new Map();
map.set("1", "str1");
map.forEach((value, key) => {
    console.warn(value, key); // str1 1
});

get

const map = new Map();
map.set("1", "str1");
console.warn(map.get("1")); // str1

groupBy

const users = [
    { id: 1, name: "John" },
    { id: 2, name: "John" },
    { id: 3, name: "Jane" }
];
 
const map = Map.groupBy(users, (user) => user.name);
console.log(map); // Map(2) {'John' => Array(2), 'Jane' => Array(1)}

has

const map = new Map();
map.set("1", "str1");
console.warn(map.has("1")); // true

keys

const map = new Map();
map.set("1", "str1");
console.warn(map.keys()); // [Map Iterator] { '1' }

set

Will override the value if the key already exists.

const map = new Map();
map.set("1", "str1");

values

const map = new Map();
map.set("1", "str1");
console.warn(map.values()); // [Map Iterator] { 'str1' }

Extending Map

Take a look how to extend Map class.

class ExtMap extends Map {
    get(key) {
        return super.get(key);
    }
 
    set(key, value) {
        return super.set(key, value);
    }
}
 
const map = new ExtMap();
map.set("1", "str1");
console.warn(map.get("1")); // str1

That's all. Start using maps with more confidence.

READ

Latest readings

Readings are sites which will help you with detailed
information about given topic. Read latest ones from Learn.

06-03-2026

Local Voice Assistant with Ollama

Build your own local voice assistant powered by Ollama.

06-03-2026

AI YouTube Thumbnail Generator

Generate YouTube thumbnails with FastAPI and Ollama.

Architecture

05-09-2024

Graph DB usage comparison

Compare Neo4j and Tigergraph databases, which is easier to work with, etc.