Objects v/s Maps

Introduction

In JavaScript, we usually use Objects to store key-value pairs, where the keys are strings or Symbols. Map, however, allow you to use any type of key, like numbers, objects, or functions, and they also remember the order in which the items are added.

In this article, we understand the differences between Objects and Maps, their performance, and practical use cases.

What is a Map?

A Map is a special type of object in JavaScript that stores data in key-value pairs. Similar to an object, but with a few differences. In a Map, the keys can be of any type—not just strings. You can use numbers, objects, or even functions as keys.

Maps also remember the order in which the items were added. This means when you loop through a Map, you get the items in the same order you put them in.

Creating A Map

To create a Map in JavaScript, you use the Map constructor. It allows two main ways to create a Map:

1. Passing an Array to new Map()

   • You can create a Map by passing an array of key-value pairs directly into the constructor.

   • Each key-value pair is represented as an inner array with two elements.

   • Example:

       const user = new Map([
         ['name', 'Jay'],
         ['age', 18],
         ['city', 'Pune']
       ]);
     

2. Creating a Map and Using .set() Method

   • Alternatively, you can create an empty Map and add key-value pairs one by one using the .set() method.

   • Example:

       const user = new Map();
     
       user.set('name', 'Jay');
       user.set('age', 18);
       user.set('city', 'Pune');
     

   • This approach gives you more flexibility, especially when the values are dynamic or coming from different sources.

Methods & Properties

1. new Map() - Creates a new, empty Map.

2. map.set(key, value) - Adds a key-value pair to the Map. If the key already exists, it updates the value.

3. map.get(key) - Returns the value associated with the given key. If the key doesn’t exist, it returns undefined.

4. map.has(key) - Checks if a key exists in the Map. Returns true if found, otherwise false.

5. map.delete(key) - Removes the key-value pair for the given key from the Map.

6. map.clear() - Removes all key-value pairs from the Map.

7. map.size - Returns the total number of key-value pairs in the Map.

How Does Map Compare Keys?

When checking if a key already exists, Map uses an internal algorithm called SameValueZero to compare keys.

This is very similar to the strict equality operator (===), but with one difference:

• In strict equality (===), NaN === NaN is false.

• In SameValueZero, NaN is considered equal to NaN.

This means you can use NaN as a key in a Map, and it will work as expected.

It’s also important to know that this comparison method is built-in and cannot be changed or customized.

Chaining Methods

You can chain multiple methods together for cleaner code:

let userMap = new Map()
  .set('name', 'Jay')
  .set('age', 20)
  .set('role', 'developer');

Iteration Over Map

Map allows several ways to loop through its elements. Since it keeps items in the order they were added, you get predictable results when looping.

1. map.keys() - Returns an iterable of all keys in the Map.

2. map.values() - Returns an iterable of all values in the Map.

3. map.entries() - Returns an iterable of [key, value] pairs. This is also the default when using for...of.

Example:

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 300],
  ['coriander', 50]
]);

// iterate over keys (vegetables)
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, coriander
}

// iterate over values (amounts)
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 300, 50
}

// iterate over [key, value] entries
for (let entry of recipeMap) { // the same as of recipeMap.entries()
  alert(entry); // cucumber,500 (and so on)
}

Using map.forEach()

The Map object also includes a forEach() method that works just like it does for arrays:

recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 etc
});

Map From Object

Normally, when we create a Map, we pass an array (or any iterable) of key-value pairs to initialize it. For example:

let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

But, if you already have a plain JavaScript object and want to convert it into a Map, you can use the built-in method Object.entries(obj).

The Object.entries() method returns an array of [key, value] pairs — exactly what Map needs for initialization.

Example:

let obj = {
  name: "Jay",
  age: 20
};

let map = new Map(Object.entries(obj));

Now map behaves like a proper Map object, and you can use all the Map methods:

map.get('name'); // Returns: "Jay"
map.has('age');  // Returns: true

Object From Map

Just like we can create a Map from a plain object using Object.entries(obj), we can also do the reverse—convert a Map back into a plain object.

This is useful when:

• You store data in a Map (for features like non-string keys or maintaining order),

• But need to pass that data to a function or third-party library that only accepts plain JavaScript objects.

The method Object.fromEntries() takes an iterable of key-value pairs and converts it into a plain object.

Example:

let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('watermelon', 4);

// Convert Map to Object
let obj = Object.fromEntries(map.entries());

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

You can also write it more simply by skipping .entries():

let obj = Object.fromEntries(map);

This works because Map is already iterable and returns key-value pairs by default when looped over.

Performance Benefits of Maps

1. Quick Access: Maps allow you to quickly access values using keys, with lookup times being constant (O(1)). This makes them much faster than objects, especially when you’re working with large amounts of data.

2. Flexible Keys: Unlike objects, which only allow strings or symbols as keys, Maps can use any type of data as a key—such as numbers, objects, or even functions. This gives you more flexibility when working with complex data.

3. Maintains Insertion Order: Maps remember the order in which items are added. This ensures that when you loop through the Map, you’ll get the values in the exact order they were inserted, making iteration more predictable.

4. No Prototype Conflicts: Since Maps don’t have a prototype chain (unlike objects), there’s less chance of conflicts with inherited properties. This makes your code cleaner and avoids potential issues.

5. Efficient Memory Use: Maps are designed specifically for storing key-value pairs, which means they use memory more efficiently compared to objects, especially when handling large sets of data.

Practical Applications of Maps

1. Caching Data: Use Maps to store frequently accessed data for quick retrieval, like API responses.

2. Configuration Settings: Store settings or options where each setting has a unique key.

3. Tracking Relationships: Use Maps to link items, such as users and their profiles or products and prices.

4. Data Grouping: Group items by a property, like categorizing books by genre.

Real-World Examples

1. User Profile Data: Imagine a website where each user has a profile. You could use a Map to store user information, where the key is the user’s unique ID, and the value is their profile data (name, age, location, etc.).

2. Inventory System: In an online store, a Map could be used to link product IDs (keys) with product details (values), such as product name, description, and price. This allows for fast lookups when a user searches for a product.

3. Student Grades: A Map can be used in schools to store student names (keys) and their corresponding grades (values). For example, the key “Jay” maps to the grade “A”, and the key “Nikhil” maps to the grade “B”.

Differences Between Objects and Maps

When To Use Maps

Choose Maps when you need:

• Key-value pairs where the keys can be of any type (e.g., strings, numbers, objects).

• Fast and efficient lookups for accessing data.

• Ordered entries that maintain the insertion order.

Conclusion

Maps in JavaScript are great for storing collections of data as key-value pairs. They are useful when you need to associate one item with another, like linking a name to an age. By knowing when and how to use Maps, you can write cleaner and more efficient code.

Want More…?

I write articles on blog.devwithjay.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn