Javascript Sets
Written By: Avinash Malhotra
Updated on
In this tutorial, we will learn about JavaScript Sets, their properties, methods, and how they differ from Arrays. We will also explore various operations that can be performed on Sets.
ES6 Sets
JavaScript Sets are data structures used to store collections of unique values. The values can be primitive or object. Sets are similar to arrays, but arrays can contain duplicate values, whereas sets do not. Sets were introduced in ES6 Version.
Sets are useful where we don't want duplicate data , like search results. Sets are also fast when we want to check a particular value is in set, as compare to Array.
new Set()
new Set() is used to create set in javascript. Set value can be empty, array or string. No not use numbers as numbers are not iterables.
const s1=new Set(); // empty set
const s2=new Set([1,2,2,3,3]); // Set(3) {1,2,3}
Arrays Vs Sets
Although both Arrays and Sets are data structures used to store multiple data, but they have different functionalities in actual usage. Here is difference between Array and Sets.
| Feature | Array | Sets |
|---|---|---|
| Duplicate | Allowed | Not Allowed |
| Ordered | yes | no, but maintain insertion order |
| Index | yes | no, but maintain insertion order |
| Performance | slow | fast |
| Use case | where order and duplicate matter | where uniqueness and performance matter |
Add data in Set
How to pass values in Set? Values can be passes in Set by using add() method.
Set(1) {"jan"}
const month=new Set();
month.add("jan");
console.log(month);
Use multiple add
Set(2) {"jan","feb"}
const month=new Set();
month.add("jan").add("feb");
console.log(month);
Use array to add multiple values
Arrays can be passes in Set as they are iterables.
Set(2) {"jan","feb"}
const data=["jan","feb"];
const month=new Set(data);
console.log(month);
Remove duplicate data from array
Set(2) {"jan","feb"}
const data=["jan","feb","feb"];
const month=new Set(data);
console.log(month);
Add string in Set
Set(5) {"l","o","r","e","m"}
const data=new Set('lorem');
console.log(data);
Size
Size property is used to check the length of set. Set doesn't have length property like string, array and functions. It returns numbers of unique elements in Set.
size property is also immutable like length in array. Its is a readonly property.
3
const x=new Set([1,2,2,3,3]);
console.log(x.size)
has()
The has method checks is a given value is in Set or not. It returns boolean value true of false.
Set has method is very fast and efficient when compared with Arrays's indexOf or includes.
true
false
const x=new Set([1,2,3]);
console.log(x.has(1));
console.log(x.has(4));
delete from Set
delete method is used to remove element from Set. This will return boolean true if the value was removed else false if value was not removed.
Set(2) {1,3}
const x=new Set([1,2,3]);
x.delete(2); // true
console.log(x);
Set(3) {1,2,3}
const x=new Set([1,2,3]);
x.delete(4); // false
console.log(x);
delete all values
Set(0) {}
const x=new Set([1,2,3]);
x.clear();
console.log(x);
iterate Set
To iterate Set in javascript, we can use forEach or for of loop.
forEach in Set
1
2
3
const x=new Set([1,2,3]);
x.forEach(i=>console.log(i));
for of loop in Set
1
2
3
const x=new Set([1,2,3]);
for( let i of x){
console.log(i);
}
Set to Array
Convert Set to Array is easily done by using Array.from() method or by using spread operator. Both methods are easy and convenient to use.
using Array.from()
[1,2,3]
const x=[1,2,3];
const y=Array.from(x);
console.log(y);
using Spread Operator
[1,2,3]
const x=[1,2,3];
const y=[...x];
console.log(y);
WeekSet
Sets can be converted to Array. But if Sets elements are cleared, they are still present in Array. This is a serious Memory Leak Issue while using Sets.
This means, the elements in sets are not Garbage Collected causing Memory Leak.
[ ]
Set(3) {1,2,3}
const x=new Set([1,2,3]);
const y=new Array(...x);
y.length=0;
console.log(y);
console.log(x);
Set(0) {}
[1,2,3]
const x=[1,2,3];
const y=new Set(x);
y.clear();
console.log(y);
console.log(x);
Introducing WeekSet
WeekSet are introduced to handle this situation by Garbage Collecting and reference. If the original reference is removed, the WeekSet value will also change.
WeekSet value can be non primitive, like string or numbers.
To add values in WeekSet, use add() with array as parameter.
[]
WeekSet {Array(0)}
const x=[1,2,3];
const y=new WeekSet();
y.add(x);
y.length=0;
console.log(y);
console.log(x);