Open In App

Map vs Object in JavaScript

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In JavaScript, both map and object stores the key-value pairs but differ on some features and use cases.

JavaScript Map

  1. Map can have keys of any data type, including objects, functions, and primitive values.
  2. Map keys are ordered based on their insertion order.
  3. 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

  1. Object keys are always strings or symbols. If other data types are used as keys, they are automatically converted to strings.
  2. Object properties do not have a guaranteed order. While most modern JavaScript engines maintain the insertion order, it’s not specified by the language.
  3. 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



Last Updated : 11 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads