Skip to content

Unlocking the Power of Map and Set in JavaScript

Posted on:July 8, 2023

Table of contents

Open 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:

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


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.


// 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.

// 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 => {

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


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.