Understanding Map in Javascript

Are you a JavaScript learner trying to understand modern data structures? Meet Map—a powerful, flexible way to handle key-value pairs in your apps.

Photo by NASA on Unsplash

In programming, choosing the right data structure for the task at hand is key to writing efficient and readable code.

In JavaScript, a regular variable stores just one value. But what if we need to store a collection of values and perform operations like sorting, searching, inserting, or deleting?

That’s where data structures like Arrays, Objects, Maps, and Sets come into play.

We’re all familiar with arrays and objects. They’re great, but they have limitations — especially when it comes to flexibility and performance. That’s where Maps shine.

What is a Map?

Map is categorised as hash-based data structure.

A Map is a collection of key-value pairs, just like an Object. But here’s what makes Map different—and better in many cases:

• Keys can be of any type: strings, numbers, booleans, even objects or functions!
• The order of insertion is preserved.
• Better methods: Easy access to .set(), .get(), .has(), .delete(), and .size

const myMap = new Map();

myMap.set('name', 'Priya');
myMap.set(123, 'Number Key');
myMap.set(true, 'Boolean Key');

console.log(myMap.get('name')); // Output: Priya
console.log(myMap.has(123));    // Output: true
console.log(myMap.size);        // Output: 3

The output of creating Map in the above example looks like this

{
'name' => 'Priya'
123 => 'Number Key'
true => 'Boolean Key'
}

//Visually it's stored like this:
Map:
 ┌─────────────┬────────────────────┐
 │   Key       │       Value        │
 ├─────────────┼────────────────────┤
 │  'name'     │    'Priya'         │
 │   123       │  'Number Key'      │
 │   true      │  'Boolean Key'     │
 └─────────────┴────────────────────┘

Iteration and Order

One key difference between Map and Object is that Maps remember the order in which keys were added. This makes iteration predictable and useful for tasks like rendering items in UI or preserving sequence.

Get Priya Raja’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

You can iterate through a Map using:

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

Initializing a Map with Data

You can even initialize a map using an array of key/value pairs.

const favoritePlaceMap = new Map([
    ['music','jazz'],
    ['name','Paris House'],
    ['visited',true],
    ['averageBill',100]
])

console.log(favoritePlaceMap.get('name')) //Paris House

Converting Between Objects and Maps

Sometimes, you’ll need to convert data from an object to a map — or vice versa. Here’s how to do both:

Object → Map

Use Object.entries() to convert an object into an array of key-value pairs, then pass it into the Map constructor:

let obj = {
  name: "Maya",
  age: 32
};

let map = new Map(Object.entries(obj)); //[ ["name","Maya"], ["age", 32] ]

alert( map.get('name') ); // Maya

//See the Flow

{ name: "Maya", age: 32 } 
   ↓ Object.entries()
[ ['name', 'Maya'], ['age', 32] ] 
   ↓ new Map()
Map { 'name' => 'Maya', 'age' => 32 }

Map → Object

Use Object.fromEntries() along with map.entries():

Reverse : Map → map.entries() → Object.fromEntries() → Object

Call map.entries which gives iterable key/value format needed in Object.fromEnteries.

let map = new Map();
map.set('Cricket', 1);
map.set('Football', 2);
map.set('Tennis', 4);

let obj = Object.fromEntries(map.entries());
// done!
// obj = { Cricket: 1, Football: 2, Tennis: 4 }

console.log(obj.Football); // Output: 2

Why Use Map?

1. Maintains Key Order: Unlike objects, Map keeps track of the insertion order of keys.
2. Better Performance : For large datasets, Map tends to offer faster read/write performance.
3. Flexible Key Types: You can use functions, objects, or any primitive type as keys.

Summary

• Use Map when you need ordered, type-flexible, and high-performance key-value storage.
• Maps offer a modern API that’s easier to use and more powerful than regular objects.
• Conversions between Map and Object are simple and effective for interoperability.

Want to dive deeper into Set, WeakMap, or WeakSet next? Let me know and I’ll break those down too!