What is a Map object and how is it different from a regular object?

Brief Answer

Map is a special object for storing key-value pairs, just like a regular object. But Map has important differences: keys can be any values (including objects), it has methods for working with data, and you can always know the size. Regular object is simpler, but Map is more powerful for complex tasks.

Full Answer

Map is a type of object in JavaScript that stores data as key-value pairs. At first glance it looks like a regular object, but has important differences that make it more convenient in some cases.

Main Differences Between Map and Regular Object

1. Any Data Types as Keys

// In regular object keys are only strings or symbols
const obj = {};
obj[1] = 'number'; // 1 becomes string '1'
obj[true] = 'boolean'; // true becomes string 'true'
 
// In Map keys can be any values
const map = new Map();
map.set(1, 'number'); // Number 1 as key
map.set(true, 'boolean'); // Boolean true as key
map.set({}, 'object'); // Object as key

2. Collection Size

// Regular object has no simple way to know size
const obj = { a: 1, b: 2 };
// No built-in way to know object has 2 properties
 
// Map has size property
const map = new Map([['a', 1], ['b', 2]]);
console.log(map.size); // 2

3. Built-in Methods

const map = new Map();
 
// Convenient methods for work
map.set('key', 'value'); // Add
map.get('key'); // Get
map.has('key'); // Check existence
map.delete('key'); // Delete
map.clear(); // Clear all

When to Use Map

Use Map when:

Need to use objects as keys
Often add/delete data
Need to frequently check collection size
Keys are not strings or symbols

Use regular object when:

Simple data storage with string keys
Need JSON serialization
Working with simple data structures

Simple Examples

Working with Custom Objects as Keys

const user1 = { id: 1, name: 'John' };
const user2 = { id: 2, name: 'Peter' };
 
const userRoles = new Map();
userRoles.set(user1, 'admin');
userRoles.set(user2, 'user');
 
// Each user stores their role
console.log(userRoles.get(user1)); // 'admin'

Counting Elements

// Count how many times each element appears
const map = new Map();
const items = ['apple', 'banana', 'apple', 'orange', 'banana'];
 
items.forEach(item => {
  map.set(item, (map.get(item) || 0) + 1);
});
 
console.log(map); // Map(3) { 'apple' => 2, 'banana' => 2, 'orange' => 1 }

Important Map Features

1. Insertion Order is Preserved

const map = new Map();
map.set('second', 2);
map.set('first', 1);
map.set('third', 3);
 
// Order is preserved as added
for (let [key, value] of map) {
  console.log(key, value);
}
// Will output in order of addition

2. No Inheritance from Object.prototype

// Regular object has inherited methods
const obj = {};
console.log(obj.toString); // function toString()
 
// Map has no inherited methods
const map = new Map();
console.log(map.toString); // undefined

Common Mistakes

1. Using Map When Not Needed

// ❌ Using Map for simple cases
const settings = new Map();
settings.set('theme', 'dark');
settings.set('lang', 'en');
 
// ✅ Regular object is simpler and better
const settings = {
  theme: 'dark',
  lang: 'en'
};

2. Expecting Object Methods in Map

// ❌ Trying to use dot notation
const map = new Map();
map.key = 'value'; // Won't work as expected
 
// ✅ Using Map methods
map.set('key', 'value'); // Correct way

Simple Rules

Map — for complex tasks with any type of keys
Object — for simple data structures with string keys
Object keys — only Map allows using objects as keys
Size — Map has built-in size property
Methods — Map has convenient methods for data manipulation

Map is a powerful tool that solves limitations of regular objects. But for simple tasks, regular object may be simpler and sufficient.

Want more articles to prepare for interviews? Subscribe to EasyAdvice, bookmark the site and improve yourself every day 💪