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.

Map vs Object in JavaScript

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

Tags:

#JavaScript-Questions #JavaScript #Web Technologies

JavaScript Objects

JavaScript Map vs Object

Map vs Object Examples

Javascript

Javascript

Map vs Object in JavaScript

Similar Reads

Contact Us