A Set is a collection of values where each value may only occur once. If you have a list of items and you need to ensure there are no duplicates, a Set is the perfect tool for the job.
You can create an empty Set and add values to it using the .add() method. Notice what happens when we try to add the same number twice:
const s = new Set();
s.add(1);
s.add(1);
console.log(s.size);1
The second .add(1) did nothing. A value can only exist once in a Set.
Sets can store values of any type, and they strictly compare them. For instance, the number 1 is different from the string '1':
const s = new Set();
s.add(1);
s.add('1');
console.log(s.size);2
The most common use case for a Set is removing duplicate elements from an array. You can pass an array directly into the new Set() constructor, which instantly filters out duplicates. Then, you can spread ... the Set back into a new array:
const nums = [1, 2, 2, 3];
const uniqueNums = [...new Set(nums)];
console.log(uniqueNums.join(','));1,2,3
To check if a Set contains a specific value, use the .has() method. It returns true or false:
const s = new Set([1, 2, 3]);
console.log(s.has(2));true
To remove a value, use the .delete() method:
const s = new Set([1, 2, 3]);
s.delete(2);
console.log(s.has(2));false
.length instead of .sizeArrays use .length to count their items, but Sets use .size. If you try to check .length on a Set, you will get undefined instead of an error, which can cause silent bugs.
It is easy to assume that two objects with identical contents are the same. But object equality in JavaScript is based on reference, not structure.
Read the code. What exactly will it print? Commit to an answer before you look.
const s = new Set([{}, {}]);
console.log(s.size);2
Because {} creates a brand new, distinct object every time, the two empty objects are unique references. The Set happily stores both of them.
To visualize how values are added and checked in a Set over time, let’s look at a step-by-step trace:
const mySet = new Set();
mySet.add('apple');
mySet.add('banana');
mySet.add('apple');
const hasBanana = mySet.has('banana');In JavaScript, NaN (Not-a-Number) normally does not equal itself (NaN === NaN is false). However, Sets use a special equality check (SameValueZero) which specifically equates NaN with NaN. This means you can only add NaN to a Set once:
const s = new Set();
s.add(NaN);
s.add(NaN);
console.log(s.size);1
Similarly, +0 and -0 are considered the same value in a Set. If you add both, the Set will only store the first one.
Can a JavaScript Set contain multiple identical values?
No, every value in a Set must be unique. — A Set is a collection of values where each value may only occur once. If you try to add a value that already exists, the Set simply ignores it.
How do you check if a Set named mySet contains the number 5?
mySet.has(5) — Sets use the .has() method to check for a value. Arrays use .includes(), but Sets use .has().
What is the correct way to find out how many items are in mySet?
mySet.size — Unlike arrays which use .length, Sets use the .size property.
How many items will be in a Set if you add NaN twice?
One, because Sets treat NaN as equal to NaN. — Sets use the SameValueZero algorithm for equality, which specifically equates NaN with NaN. Therefore, a Set can only hold one NaN.
Given an array of strings representing tags, use a Set to return a new array with all duplicate tags removed.
Pass the array to `new Set()`, then spread it back into an array using `[...]`.
const tags = ['js', 'web', 'js', 'html', 'web'];
const uniqueTags = [...new Set(tags)];
console.log(uniqueTags.join(','));Find the number of unique viewers in the array.
This code runs. It just does the wrong thing. Read it, find the defect, fix it — the tests below decide when you are right.
Sets don't have a `.length` property. Use `.size` instead.
const viewers = ['alice', 'bob', 'alice', 'charlie'];
const uniqueViewers = new Set(viewers);
console.log(uniqueViewers.size);