Set in JavaScript

📦 Introduction to Set

A Set is a built-in JavaScript collection that stores unique values. Unlike arrays, a Setautomatically removes duplicate values and preserves the order in which values are added.

✨ Features of Set

  • Stores only unique values.
  • Maintains insertion order.
  • Can store any data type.
  • Iterable using for...of.
  • Provides useful methods for managing values.

🔤 Creating a Set

Creating an Empty Set

const numbers = new Set();

Creating a Set with Initial Values

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

➕ Adding Values

Use the add() method to insert values.

Using add()

const numbers = new Set();

numbers.add(10);
numbers.add(20);
numbers.add(30);

console.log(numbers);

🚫 Duplicate Values

Duplicate values are ignored automatically.

Duplicates Are Ignored

const numbers = new Set();

numbers.add(10);
numbers.add(20);
numbers.add(10);
numbers.add(20);

console.log(numbers);

📖 Checking Values

Use has() to check whether a value exists.

Using has()

console.log(numbers.has(10));
console.log(numbers.has(50));

🗑️ Removing Values

Use delete() to remove a value.

Using delete()

numbers.delete(20);

console.log(numbers);

❌ Clearing a Set

Use clear() to remove every value.

Using clear()

numbers.clear();

console.log(numbers);

📏 Getting the Size

The size property returns the number of values.

Using size

console.log(numbers.size);

🔄 Iterating Over a Set

Using for...of

const colors = new Set([
  "Red",
  "Green",
  "Blue"
]);

for (const color of colors) {
  console.log(color);
}

Using forEach()

colors.forEach((color) => {
  console.log(color);
});

📋 Getting Values

values()

for (const value of colors.values()) {
  console.log(value);
}

🔑 Getting Keys

In a Set, keys and values are the same, so keys() returns the same values.

keys()

for (const key of colors.keys()) {
  console.log(key);
}

📦 Getting Entries

The entries() method returns [value, value] pairs.

entries()

for (const entry of colors.entries()) {
  console.log(entry);
}

🔄 Converting Between Arrays and Sets

Array → Set

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

const unique = new Set(numbers);

console.log(unique);

Set → Array

const array = [...unique];

console.log(array);

✨ Removing Duplicate Values

Unique Array

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

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

console.log(uniqueNumbers);

⚠️ Comparing Objects

Note

Objects are compared by reference, not by their contents.

Reference Comparison

const a = { id: 1 };
const b = { id: 1 };

const set = new Set();

set.add(a);
set.add(b);

console.log(set.size);

🆚 Set vs Array

  • Set stores only unique values.
  • Array allows duplicate values.
  • Set has no numeric indexes.
  • Set provides fast lookups using has().
  • Array is better when index-based access is needed.

🧠 When to Use

  • Remove duplicate values.
  • Store unique items.
  • Perform fast membership checks.
  • Track unique IDs, tags, or categories.

📚 More to Explore

>>"Use a Set whenever uniqueness matters." 🚀