Map vs Object in JavaScript
Last Updated :
11 Mar, 2024
In JavaScript, both map and object stores the key-value pairs but differ on some features and use cases.
JavaScript Map
- Map can have keys of any data type, including objects, functions, and primitive values.
- Map keys are ordered based on their insertion order.
- Maps have built-in methods for iteration, such as
forEach
, keys
, values
, and entries
.
Syntax:
map((element, index, array) => { /* … */ })
Parameters:
- element: It is a required parameter and it holds the value of the current element.
- index: It is an optional parameter and it holds the index of the current element.
- arr: It is an optional parameter and it holds the array.
JavaScript Objects
- Object keys are always strings or symbols. If other data types are used as keys, they are automatically converted to strings.
- Object properties do not have a guaranteed order. While most modern JavaScript engines maintain the insertion order, it’s not specified by the language.
- Objects have a prototype chain and inherit properties and methods from their prototype objects.
Syntax:
new Object(value)
Object(value)
let object_name = {
key_name : value,
...
}
Map vs Object Examples
Example 1: Below is the code showing both maps and objects in JavaScript.
Javascript
let employeeMap = new Map();
employeeMap.set( 'John' , { age: 30, department: 'IT' });
employeeMap.set( 'Alice' , { age: 35, department: 'HR' });
console.log( "Employee information using Map:" );
console.log(employeeMap.get( 'John' ));
console.log(employeeMap.get( 'Alice' ));
let employeeObject = {
John: { age: 30, department: 'IT' },
Alice: { age: 35, department: 'HR' }
};
console.log( "\nEmployee information using Object:" );
console.log(employeeObject[ 'John' ]);
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' }
Explanation: This code illustrates the usage of Map and Object to store employee information.
- Map allows keys of any type and provides methods like set() and get(), while Object uses string keys.
- Both are accessed differently, Map via get() and Object via bracket notation.
Example 2: Here’s another example illustrating the difference between Map and Object.
Javascript
let userPreferencesMap = new Map();
userPreferencesMap.set( 'John' , { theme: 'dark' , language: 'English' });
userPreferencesMap.set( 'Alice' , { theme: 'light' , language: 'French' });
let userPreferencesObject = {
John: { theme: 'dark' , language: 'English' },
Alice: { theme: 'light' , language: 'French' }
};
console.log( "User preferences using Map:" );
console.log(userPreferencesMap.get( 'John' ));
console.log(userPreferencesMap.get( 'Alice' ));
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...
Explanation: This code demonstrates storing user preferences using both Map and Object.
- Map allows direct key-value mapping while Object uses key-value pairs.
- Accessing preferences is straightforward with Map’s
get()
method, but requires bracket notation for Objects.
- Both structures offer efficient data retrieval based on keys.
JavaScript Map vs Object
Feature |
Map |
Object |
Key Types |
Any data type, including objects |
Limited to strings and symbols |
Key Equality |
Uses strict equality (=== ) |
Uses loose equality (== ), auto-converts to strings |
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 simple data structures |
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 |
Share your thoughts in the comments
Please Login to comment...