Skip to content
FLAVIO COPES
flaviocopes.com

The Set JavaScript Data Structure

By

Learn how JavaScript Set stores unique values, how to add, find, delete and iterate values, combine sets, convert them to arrays, and use WeakSet.

~~~

What is a Set?

A Set is a collection of unique values.

It can store primitive values and objects. Values stay in insertion order when you iterate the Set.

Sets use the SameValueZero comparison. This means NaN equals NaN, and 0 equals -0.

See the MDN Set reference for the complete API.

Create a Set

Create an empty Set with the Set constructor:

const colors = new Set()

You can also pass any iterable:

const colors = new Set(['red', 'green', 'blue'])

Repeated values are stored once:

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

numbers.size //3

Add and inspect values

Use add() to add one value:

const colors = new Set()

colors.add('red')
colors.add('green')

add() returns the Set, so you can chain calls:

colors
  .add('blue')
  .add('orange')

Adding the same value again does not create a duplicate.

Use has() to check for a value:

colors.has('red') //true
colors.has('purple') //false

Use the size property to count the values:

colors.size //4

Delete values

delete() removes one value and reports whether it was present:

colors.delete('orange') //true
colors.delete('orange') //false

clear() removes every value:

colors.clear()
colors.size //0

Iterate a Set

The simplest approach is a for...of loop:

const colors = new Set(['red', 'green', 'blue'])

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

values() and keys() return equivalent iterators:

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

The entries() iterator returns [value, value] pairs. This shape keeps Set compatible with APIs designed for Map:

for (const [key, value] of colors.entries()) {
  console.log(key, value)
}

You can also use forEach():

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

Convert between sets and arrays

Spread a Set into an array:

const colors = new Set(['red', 'green', 'blue'])
const list = [...colors]

This also gives you a short way to remove duplicate array values:

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

uniqueNumbers //[1, 2, 3]

Combine and compare sets

Modern JavaScript provides methods for common set operations.

Create a union containing values from both sets:

const frontEnd = new Set(['HTML', 'CSS'])
const programming = new Set(['JavaScript', 'CSS'])

const all = [...frontEnd.union(programming)]

all //['HTML', 'CSS', 'JavaScript']

Other composition methods are:

You can compare sets with:

These methods return new sets or booleans. They do not change the original Set.

The composition methods are part of ES2025. Check compatibility when supporting older JavaScript engines.

WeakSet

A WeakSet stores garbage-collectable values. Those values can be objects or non-registered symbols.

If nothing else references an object in a WeakSet, JavaScript can reclaim it. A regular Set keeps a strong reference to every value it contains.

Create a WeakSet and add an object:

const visited = new WeakSet()
const page = { url: '/about' }

visited.add(page)
visited.has(page) //true

A WeakSet is not iterable and has no size or clear(). It provides add(), has(), and delete().

Use it when you want to associate membership with objects without keeping those objects alive.

Tagged: JavaScript ยท All topics
~~~

Related posts about js: