Map vs Object in JavaScript
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
, andentries
.
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
// 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: { age: 35, department: 'HR' } |
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
// 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' ]); // Output: { theme: 'dark', language: 'English' } console.log(userPreferencesObject[ 'Alice' ]); // Output: { theme: 'light', language: 'French' } |
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 |
Contact Us