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

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