JavaScript Map and Set

JavaScript Map and Set

 Introduction

Map and Set are two powerful data structures introduced in ES6 that allow storing unique values and key-value pairs efficiently.

JavaScript Set

A Set is a collection of unique values. Unlike arrays, it does not allow duplicate elements.

Creating a Set

let mySet = new Set();

Adding Elements to a Set

let numbers = new Set();
numbers.add(10);
numbers.add(20);
numbers.add(10); // Duplicate, ignored
console.log(numbers); 
// Output: Set { 10, 20 }

Checking Set Size

console.log(numbers.size); // Output: 2

Checking if a Value Exists

console.log(numbers.has(10)); // true
console.log(numbers.has(30)); // false

Deleting Elements from a Set

numbers.delete(20);
console.log(numbers); // Output: Set { 10 }

Iterating Over a Set

let fruits = new Set(["Apple", "Banana", "Mango"]);

for (let fruit of fruits) {
    console.log(fruit);
}
// Output:
// Apple
// Banana
// Mango

fruits.forEach((fruit) => console.log(fruit));

Converting a Set to an Array

let numSet = new Set([1, 2, 3, 4, 5]);
let numArray = [...numSet];
console.log(numArray); 
// Output: [1, 2, 3, 4, 5]

Clearing a Set

numSet.clear();
console.log(numSet.size); // Output: 0

JavaScript Map

A Map is a collection of key-value pairs where keys can be any type (objects, functions, etc.), unlike plain objects which only allow strings/symbols as keys.

Creating a Map

let myMap = new Map();

Adding Key-Value Pairs

let userMap = new Map();
userMap.set("name", "John");
userMap.set("age", 30);
userMap.set("country", "USA");

console.log(userMap);
// Output: Map { 'name' => 'John', 'age' => 30, 'country' => 'USA' }

Getting Values

console.log(userMap.get("name")); // Output: John
console.log(userMap.get("age")); // Output: 30

Checking If a Key Exists

console.log(userMap.has("name")); // true
console.log(userMap.has("gender")); // false

Checking Map Size

console.log(userMap.size); // Output: 3

Deleting a Key

userMap.delete("age");
console.log(userMap); 
// Output: Map { 'name' => 'John', 'country' => 'USA' }

Iterating Over a Map

for (let [key, value] of userMap) {
    console.log(`${key}: ${value}`);
}
// Output:
// name: John
// country: USA

userMap.forEach((value, key) => console.log(`${key}: ${value}`));

Converting a Map to an Array

let entriesArray = [...userMap];
console.log(entriesArray); 
// Output: [ ['name', 'John'], ['country', 'USA'] ]

Clearing a Map

userMap.clear();
console.log(userMap.size); // Output: 0

Differences Between Map and Object

Feature	Map	Object
Key types	Any type (objects, functions, etc.)	Strings or symbols only
Order	Keys remain in insertion order	No guaranteed order
Iteration	Easy with .forEach() or for...of	Requires Object.keys(), Object.values(), or Object.entries()
Performance	Optimized for frequent additions/removals	Not optimized for frequent changes

Summary

✔ Set stores unique values (no duplicates)
✔ Map stores key-value pairs
✔ Map keys can be any type
✔ Set and Map support iterators (for...of, .forEach())
✔ Set is useful for removing duplicates from an array
✔ Map is better than objects when keys are not strings

Now you know how to use Map and Set in JavaScript! Let me know if you need more examples. 😊