Platform under construction

Arrays & Collections

Advanced

Set & WeakSet

Set stores unique values. WeakSet stores object references weakly for specialized membership tracking.

const tags = new Set(["html", "css", "html"]);

console.log(tags.size);
console.log(tags.has("css"));

Arrays & Collections

Set is the collection to reach for when uniqueness matters.

A Set stores each value only once. Adding the same value again does not create a duplicate.

Set is iterable, so it works with for...of and spread. Converting a Set back to an array is common when you want unique list values.

WeakSet only accepts objects and does not expose size or iteration. It is useful for private membership tracking without preventing garbage collection.

Set

Unique values with add, has, delete and size.

Unique array

Use [...new Set(array)] for simple deduping.

WeakSet

Weak object membership without iteration.

Membership

has checks whether a value is present.

Examples

Array code should reveal whether it reads, mutates, transforms or summarizes.

Set for unique selected ids

const selectedIds = new Set();

selectedIds.add("a1");
selectedIds.add("a1");

console.log(selectedIds.size); // 1

Array uniqueness by manual checks everywhere

const selectedIds = [];

if (!selectedIds.includes("a1")) {
  selectedIds.push("a1");
}

Code patterns

Reusable examples for quick reference.

These are the patterns developers search for constantly: reading items, copying arrays, choosing map/filter/reduce, sorting with a comparator, destructuring and using Set or Map.

Create unique values

Duplicate values are ignored.

const tags = new Set(["html", "css", "html"]);

console.log(tags.size);

Add and check

Use add and has for membership.

const selected = new Set();
selected.add("html");

console.log(selected.has("html"));

Array dedupe

Convert through Set to remove duplicates.

const tags = ["html", "css", "html"];
const uniqueTags = [...new Set(tags)];

WeakSet membership

Track objects without exposing iteration.

const seen = new WeakSet();
const record = {};

seen.add(record);
console.log(seen.has(record));

Rules that matter

The right collection method makes the intent obvious.

Arrays and collections are not just storage. They describe whether the code is selecting, transforming, grouping, counting, sorting or enforcing uniqueness.

Use Set for uniqueness

It communicates that duplicates are not allowed.

Use has for membership

It reads cleanly and is efficient.

Convert to arrays for array methods

Use [...set] when you need map or filter.

Remember object identity

Two separate object literals are different values.

Use WeakSet only for objects

Primitive values are not allowed.

Do not expect WeakSet iteration

WeakSet is intentionally not enumerable.

Production thinking

Collection choices decide how readable data flow becomes.

Why does this matter?

Set removes a lot of duplicate-checking boilerplate and makes uniqueness a data-structure rule.

Accessibility

Selected item collections can use Set to prevent duplicate states in rendered controls.

Production note

Production code should use Set when uniqueness is part of the model, not an afterthought.

SEO note

Sets can help remove duplicate generated links or tags before rendering.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add another duplicate tag.
Use selected.has before rendering a status.
Create a WeakSet with one object.

Practice assignment

Do this before moving to the next topic.

Create a Set.
Add and delete one value.
Convert a Set back to an array.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Set & WeakSet.