JavaScript Map and Set vs. Objects and Arrays: When to Use Each

Published on: July 12, 2024 by Dr. Talib

For a long time, JavaScript developers relied on two primary data structures: Objects for key-value pairs and Arrays for ordered lists. While powerful, they have limitations. Modern JavaScript (ES6) introduced two new specialized structures, Map and Set, which provide better performance and a more robust API for specific tasks.

Collections of Unique Values: `Set` vs. `Array`

The core difference is simple: a Set can only contain unique values. If you try to add a value that already exists, it will be ignored. An Array, on the other hand, can contain duplicates.

When to use a `Set`:

Use a `Set` when your primary concern is to store a unique collection of items and, most importantly, to quickly check for the existence of an item.

• Checking for existence: mySet.has(value) is significantly faster (O(1) complexity) than myArray.includes(value) (O(n) complexity) on large datasets.
• Removing duplicates: A common trick to get a unique list from an array is to convert it to a Set and back again.

const duplicateNumbers = [1, 2, 3, 3, 4, 5, 5, 5];

// 1. Create a Set from the array to automatically remove duplicates
const uniqueNumbersSet = new Set(duplicateNumbers); // Set(5) { 1, 2, 3, 4, 5 }

// 2. Check for an item's existence (very fast)
console.log(uniqueNumbersSet.has(3)); // true
console.log(uniqueNumbersSet.has(6)); // false

// 3. Convert it back to an array if needed
const uniqueNumbersArray = [...uniqueNumbersSet]; // [1, 2, 3, 4, 5]

When to use an `Array`:

Use an `Array` when the order of items is critical, you need to access items by their index (e.g., myArray[0]), or you need the rich suite of array methods like .map(), .filter(), and .reduce().

Key-Value Pairs: `Map` vs. `Object`

For years, developers used plain Objects as "maps" or "dictionaries." While this works, the modern Map object was specifically designed for this purpose and offers several key advantages.

When to use a `Map`:

Use a `Map` when you need a dedicated key-value store, especially if you have a large number of entries or if your keys are not strings.

• Any key type: A `Map` can use any value as a key, including objects, functions, and numbers. An `Object` can only use strings and symbols as keys.
• Performance: For frequent additions and removals of key-value pairs, `Map` is significantly faster.
• Built-in size property: Getting the number of items is easy with myMap.size, whereas with an Object you must use Object.keys(myObj).length, which is less direct.
• Guaranteed order: A `Map` remembers the original insertion order of its keys, which is not always guaranteed with plain Objects.

const myMap = new Map();
const user = { id: 1 }; // An object to use as a key

// Set values
myMap.set('name', 'HTML Viewer'); // String key
myMap.set(user, 'Admin Role');    // Object key

// Get values
console.log(myMap.get('name')); // "HTML Viewer"
console.log(myMap.get(user));   // "Admin Role"

// Check for a key
console.log(myMap.has('name')); // true

// Get size
console.log(myMap.size); // 2

// Iterate over a map
myMap.forEach((value, key) => {
  console.log(`${key} = ${value}`);
});

When to use an `Object`:

Use a plain `Object` when you have a small, fixed set of keys that are simple strings, or when you need the convenience of JSON serialization (JSON.stringify() only works properly with plain Objects, not Maps).

Conclusion: Choosing the Right Tool for the Job

• If you need a simple, ordered list and powerful iteration methods, use an **Array**.
• If you need to store a collection of unique values and quickly check for their existence, use a **Set**.
• If you need a simple data record with a fixed set of string-based keys, use an **Object**.
• For a highly optimized, flexible key-value store, especially with non-string keys or frequent changes, use a **Map**.

Understanding the strengths of these data structures allows you to write more performant, readable, and intentional code. While Objects and Arrays are the workhorses of JavaScript, knowing when to reach for the specialized tools of `Map` and `Set` is a sign of an advanced developer.