Mastering JavaScript's Map

Introduction

Objects have long been the go-to choice for storing key-value pairs in JavaScript. However, the Map data structure offers a more powerful and flexible alternative. Unlike objects, Map allows keys of any data type, maintains insertion order, and performs better in some cases.

In this guide, you'll learn everything about Map JavaScript, including how to use it effectively in real-world scenarios.

---

What is a Map?

A Map is a built-in JavaScript data structure that holds key-value pairs, where keys can be any type of value, including objects, functions, and primitive types.

Why Use Map Over Object?

---

Creating a Map

You can create a Map using the new Map() constructor:

const myMap = new Map();

Adding Key-Value Pairs

Use .set(key, value) to add entries:

myMap.set('name', 'Alice');
myMap.set(42, 'The Answer');
myMap.set(true, 'Boolean Key');

Accessing Values

Retrieve values using .get(key), ensuring you use the exact key reference:

console.log(myMap.get('name')); // Alice
console.log(myMap.get(42)); // The Answer

Checking Key Existence

Use .has(key) to check if a key exists:

console.log(myMap.has('name')); // true
console.log(myMap.has('age')); // false

Removing a Key

Delete a key-value pair using .delete(key):

myMap.delete(42);
console.log(myMap.has(42)); // false

Finding the Size

Use .size to get the number of elements:

console.log(myMap.size); // 2

---

Iterating Over a Map

You can loop through a Map using different methods:

Using forEach()

myMap.forEach((value, key) => {
    console.log(`${key} -> ${value}`);
});

Using for...of

for (let [key, value] of myMap) {
    console.log(`${key} -> ${value}`);
}

Converting Map to Array

If you need an array representation:

const entriesArray = Array.from(myMap);
console.log(entriesArray);

---

Using Arrays or Objects as Keys

Unlike objects, Map allows arrays and objects as keys:

const myMap = new Map();
const keyArray = [1, 2, 3];
myMap.set(keyArray, 'Array as Key');

console.log(myMap.get(keyArray)); // Array as Key ✅

Important Note: If you try to retrieve the value using a new array (myMap.get([1, 2, 3])), it won’t work because objects and arrays are reference-based, not value-based.

---

Clearing a Map

Use .clear() to remove all key-value pairs:

myMap.clear();
console.log(myMap.size); // 0

---

Real-World Use Cases

1. Caching Computation Results

const myMap = new Map();

const getSumofArray = (...arr) => {
    if (myMap.has(arr)) return myMap.get(arr);

    let computeSum = arr.reduce((initialValue, accum) => initialValue + accum, 0);
    myMap.set(arr, computeSum); //we can store arr as the key
    return computeSum;
};

console.time("Function Execution Time");
console.log(getSumofArray(1, 2, 3, 4, 5));
console.timeEnd("Function Execution Time");

console.time("Function Execution Time");
console.log(getSumofArray(1, 3, 4, 5));
console.timeEnd("Function Execution Time");

console.time("Function Execution Time");
console.log(getSumofArray(1, 2, 3, 4, 5));
console.timeEnd("Function Execution Time");

/***
output
15
Function Execution Time: 74.399ms
13
Function Execution Time: 0.078ms
15
Function Execution Time: 0.087ms

=== Code Execution Successful ===
**/

Using Map to cache computed values can speed up repeated function calls:

---

Conclusion

The Map data structure in JavaScript is a powerful alternative to objects for handling key-value pairs. It offers flexibility, better performance, and maintains insertion order. Whether you're working with complex keys (objects/arrays), tracking data efficiently, or improving performance, Map is a great choice.

What’s your favorite use case for Map? Let me know in the comments! 🚀