> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.

# TypeScript Set

A `Set` in TypeScript is a generic, iterable collection of unique values. It wraps the native ECMAScript 6 `Set` object with TypeScript's static type system, ensuring that all elements within the collection conform to a specified type parameter `<T>`. Uniqueness is evaluated using the SameValueZero algorithm, meaning `NaN` is considered equal to `NaN`, and duplicate values are silently ignored during insertion.

## Instantiation and Type Inference

A `Set` can be instantiated empty with an explicit generic type argument, or initialized with an iterable object (like an Array), from which TypeScript will infer the type.

```typescript theme={"dark"}
// Explicitly typed empty Set
const stringSet = new Set<string>();

// Type inferred as Set<number>
const numberSet = new Set([1, 2, 3, 3]); // Internal state: {1, 2, 3}

// Union types
const mixedSet = new Set<string | number>();
```

## Core API

The `Set` prototype provides a standard set of methods for mutation and inspection.

* **`add(value: T): this`**: Appends a new element with the specified value. Returns the `Set` instance, enabling method chaining.
* **`has(value: T): boolean`**: Evaluates whether an element with the specified value exists within the collection.
* **`delete(value: T): boolean`**: Removes the specified element. Returns `true` if the element existed and was removed, or `false` if it did not exist.
* **`clear(): void`**: Removes all elements from the `Set`.
* **`size: number`**: A read-only property returning the total count of elements.

```typescript theme={"dark"}
const registry = new Set<number>();

// Mutation
registry.add(100).add(200); 

// Inspection
const exists = registry.has(100); // true
const count = registry.size;      // 2

// Deletion
const removed = registry.delete(200); // true
registry.clear();                     // size is now 0
```

## Object Reference Equality

When storing complex types (objects, arrays, functions), uniqueness is determined by memory reference, not structural equality. Two structurally identical objects are treated as distinct elements.

```typescript theme={"dark"}
interface Config {
    retries: number;
}

const configSet = new Set<Config>();
const defaultConfig = { retries: 3 };

configSet.add(defaultConfig);
configSet.add(defaultConfig); // Ignored, same reference
configSet.add({ retries: 3 }); // Added, different reference

console.log(configSet.size); // 2
```

## Iteration

`Set` objects are natively iterable and maintain insertion order. They can be traversed using `for...of` loops or the built-in `forEach` method.

```typescript theme={"dark"}
const tokens = new Set<string>(['alpha', 'beta', 'gamma']);

// Iterable protocol
for (const token of tokens) {
    console.log(token);
}

// Callback-based iteration
// Note: 'value' and 'key' are identical in Sets to maintain compatibility with Map's forEach signature.
tokens.forEach((value: string, key: string, set: Set<string>) => {
    console.log(value === key); // true
});
```

## Native Set Operations (TypeScript 5.5+ / ES2024)

Modern TypeScript supports native mathematical set operations, returning new `Set` instances without mutating the originals.

```typescript theme={"dark"}
const evens = new Set<number>([2, 4, 6, 8]);
const primes = new Set<number>([2, 3, 5, 7]);

// Elements in either set
const union = evens.union(primes); // Set {2, 4, 6, 8, 3, 5, 7}

// Elements in both sets
const intersection = evens.intersection(primes); // Set {2}

// Elements in 'evens' but not in 'primes'
const difference = evens.difference(primes); // Set {4, 6, 8}

// Elements in either set, but not both
const symmetricDifference = evens.symmetricDifference(primes); // Set {4, 6, 8, 3, 5, 7}

// Boolean subset/superset checks
const isSubset = new Set([2, 4]).isSubsetOf(evens); // true
const isSuperset = evens.isSupersetOf(new Set([2])); // true
```

<div
  style={{ 
display: "flex", 
justifyContent: "space-between", 
alignItems: "center", 
maxWidth: "754px", 
padding: "1rem 0",
marginBottom: "24px"
}}
>
  <span style={{ fontWeight: "bold", fontSize: "1.25rem", color: "var(--tw-prose-headings)", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" }}>Tired of Poor TypeScript Skills? Fix That With Deep Grasping!</span>

  <a
    href="https://syntblaze.com"
    target="_blank"
    style={{ 
  marginLeft: "24px",
  textDecoration: "none", 
  backgroundColor: "#007AFF",
  color: "#ffffff", 
  padding: "6px 16px", 
  borderRadius: "16px",
  fontSize: "0.9rem",
  fontWeight: "600",
  textAlign: "center",
  transition: "background-color 0.2s ease"
}}
  >
    Learn More
  </a>
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/skill-tracking.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=b9b0305c93bb501c9e767b5c76c88835" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/skill-tracking.png" />

  <img src="https://mintcdn.com/syntblazellc/23tyuOzaWS88qFlc/images/nuggets.png?fit=max&auto=format&n=23tyuOzaWS88qFlc&q=85&s=c86c80197299762989e9b882419b2109" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/nuggets.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/bite-sized-exercises.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=a65f9a38c37ff28ab73ed783c53c60e3" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/bite-sized-exercises.png" />
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "12px" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/mastery-chain.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=748a1763454713e679260fbb95f154a2" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/mastery-chain.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-previews.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=242f61448ff5dd6deaaab2dccc13b507" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-previews.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-explanations.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=cf0fc1c31f9cd0fc26716781be05fbc9" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-explanations.png" />
</div>
