Map vs Object in JavaScript
Last Updated :
18 Nov, 2024
Improve
In JavaScript, both Map and Object store key-value pairs.
- Maps offer better performance for frequent additions or deletions. For read heavy operations where strings are keys, Objects provide better performance.
- Object allows only Strings and Symbols as keys, but Map maintains key order and allows any data type (including objects) as keys.
- JSON directly supports Objects. To create a JSON object from map, we first need to convert the map into an object.
- Maps maintain order of insertion of items. Objects are not ordered.
- Maps support functions like get(), set(), has() and delete() which are not there in Objects.
- Maps also have size property to quickly get the size.
- Object have properties inherited from Prototype Chain and we need to be careful to make sure that the key names that we use do not clash with existing properties. For example toString(). Please see the below code. Maps do not require such caution and simpler to use.
const obj = {};
// Add a key named "toString" to the object.
obj.toString = function () {
return "Custom toString method";
};
// Attempt to call the custom `toString` method.
console.log(obj.toString()); // Output: "Custom toString method"
// Delete the custom `toString` property.
delete obj.toString;
// Call the default `toString` method from Object.prototype.
console.log(obj.toString()); // Output: "[object Object]"
Output
Custom toString method [object Object]
| Feature | Map | Object |
|---|---|---|
| Key Types | Any data type, including objects | Limited to strings and symbols. If we provide other types, for example a number, it auto converts to strings. For example obj[55] = true is treated as obj["55"] = true. |
| Iteration | Supports easy iteration (for...of, forEach) | Iteration through keys/values possible (for...in, Object.keys()) |
| Size | Has a size property | No direct size property, count keys manually |
| Performance | Efficient for frequent additions/removals | Efficient for frequent reads with string keys. |
| Methods | Provides various built-in methods (set, get, delete, has, etc.) | Limited built-in methods for manipulation |
| Key Order | Maintains the order of insertion | No guaranteed order of keys (may vary across JavaScript engines) |
| Use Cases | Versatile, supports various key types | Simple key-value pairs, plain data structures |
Map vs Object Examples
Example 1: In this example we demonstrates storing and accessing employee information using both a Map and an Object. It highlights the flexibility of Map with methods like set() and get() for retrieving data.
// Using Map to store employee information
let employeeMap = new Map();
employeeMap.set('John', { age: 30, department: 'IT' });
employeeMap.set('Alice', { age: 35, department: 'HR' });
// Accessing employee information using Map
console.log("Employee information using Map:");
console.log(employeeMap.get('John'));
console.log(employeeMap.get('Alice'));
// Using Object to store employee information
let employeeObject = {
John: { age: 30, department: 'IT' },
Alice: { age: 35, department: 'HR' }
};
// Accessing employee information using Object
console.log("\nEmployee information using Object:");
console.log(employeeObject['John']);
// Output: { age: 30, department: 'IT' }
console.log(employeeObject['Alice']);
Output
Employee information using Map:
{ age: 30, department: 'IT' }
{ age: 35, department: 'HR' }
Employee information using Object:
{ age: 30, department: 'IT' }
{ age: 35, department: 'HR' }
Example 2: In this example we demonstrates storing and accessing user preferences using both a Map and an Object. It highlights how data is stored and retrieved.
// Using Map to store user preferences
let userPreferencesMap = new Map();
userPreferencesMap.set('John', { theme: 'dark', language: 'English' });
userPreferencesMap.set('Alice', { theme: 'light', language: 'French' });
// Using Object to store user preferences
let userPreferencesObject = {
John: { theme: 'dark', language: 'English' },
Alice: { theme: 'light', language: 'French' }
};
// Accessing user preferences using Map
console.log("User preferences using Map:");
console.log(userPreferencesMap.get('John'));
// Output: { theme: 'dark', language: 'English' }
console.log(userPreferencesMap.get('Alice'));
// Output: { theme: 'light', language: 'French' }
// Accessing user preferences using Object
console.log("\nUser preferences using Object:");
console.log(userPreferencesObject['John']);
console.log(userPreferencesObject['Alice']);
Output
User preferences using Map:
{ theme: 'dark', language: 'English' }
{ theme: 'light', language: 'French' }
User preferences using Object:
{ theme: 'dark', language: 'English' }
{ theme: 'light', langu...
