JavaScript Map & Set
JavaScript Set
A Set stores unique values, automatically ignoring duplicates.
Adding a value that is already there does nothing.
That makes removing duplicates a one-line job.
Example
Example
javascript
const tags = new Set();
tags.add("js");
tags.add("css");
tags.add("js");
console.log(tags.size);The output is 2: the repeat was ignored.
Set Basics
add(value) adds a value if it is not already present.
has(value) checks for it, and delete removes it.
size counts the values.
Syntax
Syntax
javascript
const set = new Set();
set.add(value);
set.has(value);Values keep the order they were first added.
Removing Duplicates
This is by far the most common use of a Set.
Example
Example
javascript
const numbers = [1, 2, 2, 3, 3, 3];
const unique = [...new Set(numbers)];
console.log(unique.join(","));
console.log(unique.length);The output is 1,2,3 then 3.
Checking Membership
has is faster than an array's includes on large collections.
That matters when you check many times.
Example
Example
javascript
const allowed = new Set(["red", "green"]);
console.log(allowed.has("red"));
console.log(allowed.has("blue"));The output is true then false.
Values Are Compared Strictly
A string and a number are different values, so both are kept.
Example
Example
javascript
const set = new Set();
set.add(1);
set.add("1");
console.log(set.size);The output is 2.
Objects Are Compared by Identity
Two identical-looking objects are different values.
So a Set will happily hold both.
Example
Example
javascript
const set = new Set();
set.add({ id: 1 });
set.add({ id: 1 });
console.log(set.size);The output is 2, which is rarely what people expect.
Looping Over a Set
A Set is iterable, so for of and spread both work.
Example
Example
javascript
const tags = new Set(["js", "css", "html"]);
const list = [];
for (const tag of tags) {
list.push(tag);
}
console.log(list.join(","));The order is the order values were first added.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Set</title>
</head>
<body>
<h1>JavaScript Set</h1>
<p id="out"></p>
<script>
const numbers = [1, 2, 2, 3, 3, 3, 4];
const unique = [...new Set(numbers)];
const allowed = new Set(["red", "green", "blue"]);
document.getElementById("out").innerHTML =
"Original: " + numbers.join(", ") +
"<br>Unique: " + unique.join(", ") +
"<br>Is purple allowed: " + allowed.has("purple");
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try adding duplicates:
Add more repeats to the array and watch the unique list stay the same.
Important Points
- A Set holds unique values only.
- Adding a duplicate does nothing.
[...new Set(array)]removes duplicates.- Values are compared strictly, so 1 and "1" both fit.
- Objects are compared by identity, not contents.
Conclusion
A Set is the simplest way to guarantee uniqueness.
The array round trip is one of the most useful one-liners in JavaScript.
Remember that objects are compared by identity, so duplicates by value still get in.