Map and Set in JavaScript

Introduction

JavaScript provides multiple ways to store and manage data, with Objects and Arrays being the most commonly used structures. However, as applications grow in complexity, certain limitations of these traditional structures become apparent. ES6 introduced Map and Set to solve specific problems such as efficient key-value storage and handling unique collections. These structures provide better performance, flexibility, and clarity in many real-world scenarios.

Problems with Traditional Objects and Arrays

Before understanding Map and Set, it is important to identify the limitations of Objects and Arrays.

Objects are commonly used to store key-value pairs, but they have restrictions. Keys can only be strings or symbols, and getting the size of an object requires additional steps.

Example:

const user = {
  name: "Ravi",
  age: 25,
  city: "Delhi"
};

const size = Object.keys(user).length;
console.log(size); // 3

Arrays are used for ordered collections, but checking for uniqueness is inefficient because methods like includes() require iterating through the array.

Example:

const items = ["pen", "book"];

function addUnique(arr, value) {
  if (!arr.includes(value)) {
    arr.push(value);
  }
}

addUnique(items, "pencil");
addUnique(items, "pencil");

console.log(items); // ["pen", "book", "pencil"]

This approach works but becomes inefficient for large datasets because it takes linear time.

What Map Is

A Map is a collection of key-value pairs where keys can be of any data type. Unlike objects, Maps maintain insertion order and provide built-in methods for easier manipulation.

Creating a Map:

const inventory = new Map();

Adding values:

inventory.set("laptop", 50000);
inventory.set("mobile", 20000);
inventory.set("tablet", 15000);

Accessing values:

console.log(inventory.get("laptop")); // 50000

Checking existence:

console.log(inventory.has("mobile")); // true

Getting size:

console.log(inventory.size); // 3

Iterating over Map:

inventory.forEach((price, item) => {
  console.log(item, price);
});

Using non-string keys:

const studentMarks = new Map();

const student1 = { name: "Amit" };
const student2 = { name: "Neha" };

studentMarks.set(student1, [80, 85]);
studentMarks.set(student2, [90, 95]);

console.log(studentMarks.get(student1));

Maps allow objects, functions, or any data type as keys, which is not possible with standard objects.

What Set Is

A Set is a collection of unique values. It automatically removes duplicates and provides efficient lookup operations.

Creating a Set:

const uniqueNumbers = new Set([1, 2, 3]);

Adding values:

uniqueNumbers.add(4);
uniqueNumbers.add(2); // duplicate, ignored

Checking size:

console.log(uniqueNumbers.size); // 4

Checking existence:

console.log(uniqueNumbers.has(3)); // true

Deleting values:

uniqueNumbers.delete(2);

Iterating over Set:

uniqueNumbers.forEach(value => {
  console.log(value);
});

Set ensures uniqueness automatically, eliminating the need for manual checks.

Difference Between Map and Object

Key Types Objects allow only string and symbol keys, whereas Maps allow any data type as keys.

Order Objects do not guarantee insertion order consistently, while Maps preserve insertion order.

Size Objects require Object.keys().length to determine size, whereas Maps provide a direct .size property.

Performance Objects are suitable for simple data storage, while Maps perform better when frequent additions and deletions are required.

Example comparison:

const obj = {};
obj["a"] = 1;

const map = new Map();
map.set("a", 1);

Map provides more flexibility and clarity for structured data operations.

Difference Between Set and Array

Duplicates Arrays allow duplicate values, whereas Sets automatically enforce uniqueness.

Search Efficiency Arrays require methods like includes(), which take linear time. Sets provide faster lookup with constant time complexity.

Index Access Arrays support index-based access, while Sets do not.

Example:

const arr = [1, 2, 2, 3];
const set = new Set(arr);

console.log(arr); // [1, 2, 2, 3]
console.log(set); // {1, 2, 3}

Set is ideal when uniqueness is required, while arrays are better for ordered data with indexing.

When to Use Map and Set

Use Map when You need flexible key types such as objects or functions. You want to maintain insertion order. You frequently add or remove key-value pairs. You need a reliable and efficient way to manage dynamic data.

Use Set when You need to store unique values only. You want fast existence checks. You want to remove duplicates from a collection.

Example removing duplicates:

const numbers = [1, 2, 2, 3, 4, 4];

const unique = [...new Set(numbers)];

console.log(unique); // [1, 2, 3, 4]

Conclusion

Map and Set are essential data structures in modern JavaScript that address limitations of traditional Objects and Arrays. Map provides a flexible and efficient way to store key-value pairs, while Set ensures uniqueness and fast lookups. Understanding when and how to use these structures allows developers to write more optimized, maintainable, and scalable code.