Unlocking the Power of Map and Set in JavaScript

Table of contents

Objects vs Maps

In JavaScript, both Map and plain objects (Object) can be used to store key-value pairs, but they have some differences that make them suitable for different use cases.

Here’s a brief comparison of their key characteristics:

• Key Types

  | Map: Supports keys of any data type, including objects and primitives.

  | Object: Converts keys to strings; non-string keys are automatically converted.

• Order of Keys

  | Map: Maintains order based on insertion; iterating over a Map follows the insertion order.

  | Object: Does not guarantee a specific order; recent engines may maintain insertion order, but it’s not standardized.

• Size Property

  | Map: Has a size property for easily determining the number of key-value pairs.

  | Object: Requires manual iteration to count properties.

• Iteration

  | Map: Offers built-in methods like forEach, keys, values, and entries.

  | Object: Supports iteration with for…in loop or Object.keys, Object.values, and Object.entries methods.

• Inheritance

  | Map: Clean and iterable; lacks prototype properties and methods.

  | Object: Inherits properties and methods from Object.prototype, potentially causing unexpected behavior during iteration.

• Performance

  | Map: Generally performs better with frequent additions and removals of key-value pairs.

  | Object: Can be more efficient for scenarios with string keys and simple lookups.

Objects in JavaScript are often treated like dictionaries in other languages, leading to suboptimal performance and code complexity.

Example

Suppose you’re building a user activity tracker, and you want to record the order in which users perform actions on a website. Each action is associated with a timestamp, and you want to quickly check if a particular action has occurred.

// Using Map for tracking user actions
const userActions = new Map();

// User performs actions
function performAction(userId, action) {
  const timestamp = new Date();
  if (!userActions.has(userId)) {
    userActions.set(userId, []);
  }

  const userHistory = userActions.get(userId);
  userHistory.push({ action, timestamp });
}

// Simulate user actions
performAction(1, "Login");
performAction(2, "Browse");
performAction(1, "Logout");
performAction(2, "Add to Cart");

// Accessing user action history
const user1History = userActions.get(1);
console.log("User 1 History:", user1History);

const user2History = userActions.get(2);
console.log("User 2 History:", user2History);

In this example, a Map is used to store the user actions. The keys are user IDs, and the values are arrays of objects representing each action along with its timestamp. This allows you to maintain the order of actions for each user and easily retrieve their action history.

Using an object for this purpose might involve creating unique string keys for each user, making the structure less intuitive, and it wouldn’t guarantee the order of insertion. The Map provides a cleaner and more natural way to associate user actions with their IDs while maintaining the order of those actions.

Arrays vs Sets

In JavaScript, both sets and arrays are used to store collections of data, but they have some key differences in terms of their features and use cases.

• Order

  | Array: Arrays are ordered collections, meaning the elements are stored in a specific order, and you can access them using indices. Elements in an array can be retrieved based on their position (index) in the array.

  | Set: Sets are unordered collections of unique values. The order of elements in a set is not guaranteed, and you cannot access elements by index.

• Duplicates

  | Array: Arrays can contain duplicate values. You can have the same value at multiple positions within an array.

  | Set: Sets automatically eliminate duplicate values. If you try to add the same value more than once, it won’t be added.

• Methods

  | Array: Arrays come with a variety of built-in methods like push, pop, shift, unshift, splice, etc., which facilitate manipulation and transformation of array elements.

  | Set: Sets have methods like add, delete, has, etc., for basic manipulation. They don’t have as many methods as arrays, but they are designed for different use cases.

• Use Cases

  | Array: When the order of elements is significant, and you need to access elements by index. Useful when dealing with a list of items that might have duplicates.

  | Set: Use sets when you need to store a unique collection of values and the order of elements is not important. Efficient for checking the presence of a specific value.

Example

• Leveraging Sets for Uniqueness

// Before: Checking if a user is online using an array
const userIDsInChat = [1, 7, 17];

// Check if a user is online
const isUserOnline = (id: number): boolean => userIDsInChat.includes(id);

// After: Utilizing Set for uniqueness
const userIDsInChatSet = new Set([1, 7, 17]);

// Check if a user is online
const isUserOnlineSet = (id: number): boolean => userIDsInChatSet.has(id);

Using a Set for checking existence and uniqueness simplifies the code and improves performance, especially when dealing with large datasets.

• Efficiently Removing Items with Sets

// Before: Removing a user from an array
const removeUserFromIDs = (id: number): void => {
  const index = userIDsInChat.indexOf(id);
  if (index !== -1) userIDsInChat.splice(index, 1);
};

// After: Removing a user from a Set
const removeUserFromSet = (id: number): void => {
  userIDsInChatSet.delete(id);
};

Sets provide a straightforward way to add, check, and remove items efficiently, making the code more readable and performant.

Conclusion

Understanding the appropriate use of data structures like Map and Set is crucial for writing clean, efficient, and maintainable JavaScript code. By replacing object dictionaries with Maps and utilizing Sets for unique values, developers can significantly improve the quality and performance of their applications. Remember, objects are not dictionaries; let’s use the right tools for the job.