A JavaScript Set is a collection of values that are unique.
Sets can hold values of any data type. It can be simple primitives, such as integers or strings, etc, or complex types like arrays or object literals. Values in the Set can only occur once.
In this article, you'll learn eight JavaScript Set methods you should master today.
1. How to Create a New Set on JavaScript
You can create a new Set object using the new Set() constructor. The Set object stores unique values of any data type. This constructor accepts an iterable object as a parameter.
const setObj = new Set([21, 34, 35, 56, 23]);
console.log(setObj);
Output:
Set(5) { 21, 34, 35, 56, 23 }
If you don't specify anything in the parameter, a new empty Set is created.
const setObj = new Set();
console.log(setObj);
Output:
Set(0) {}
If you try to create a Set with repeating elements, the duplicate elements will be removed and a unique Set will be returned.
const setObj = new Set([1, 2, 3, 1, 2, 3]);
console.log(setObj);
Output:
Set(3) { 1, 2, 3 }
You can also create a Set using mixed data types.
const setObj = new Set([1, 2, "Hello", [45, 67, 78]]);
console.log(setObj);
Output:
Set(4) { 1, 2, 'Hello', [ 45, 67, 78 ] }
2. How to Append New Elements to a Set Object
You can append a new element to the end of the Set object using the add() method. This method accepts the value of the element to add to the Set object as a parameter, and returns the new Set object with added value.
const setObj = new Set();
setObj.add("Welcome");
setObj.add("to");
setObj.add("MUO");
console.log(setObj);
Output:
Set(3) { 'Welcome', 'to', 'MUO' }
You can directly pass the value as a parameter, or you can pass the variable as one instead.
const setObj = new Set();
// Appending value to a Set object
setObj.add("Welcome");
const var1 = "to";
const var2 = "MUO";
// Appending variable to a Set object
setObj.add(var1);
setObj.add(var2);
console.log(setObj);
Output:
Set(3) { 'Welcome', 'to', 'MUO' }
The add() method also supports chaining.
const setObj = new Set();
// Chaining
setObj.add(1).add(2).add(3);
console.log(setObj);
Output:
Set(3) { 1, 2, 3 }
If you try to append duplicate elements, only the first instance of the element will be saved.
const setObj = new Set();
setObj.add(1);
setObj.add(2);
setObj.add(3);
setObj.add("M");
setObj.add("U");
setObj.add("O");
setObj.add(1);
setObj.add(2);
setObj.add(3);
console.log(setObj);
Output:
Set(6) { 1, 2, 3, 'M', 'U', 'O' }
3. How to Remove All Elements From a Set Object
You can remove all elements from a Set object using the clear() method. This method removes all the elements and returns undefined.
const setObj = new Set([1, 2, 3, 4, 5]);
console.log("Size of the Set object: " + setObj.size);
console.log(setObj);
setObj.clear();
console.log("Size of the Set object after clearing elements: " + setObj.size);
console.log(setObj);
Output:
Size of the Set object: 5
Set(5) { 1, 2, 3, 4, 5 }
Size of the Set object after clearing elements: 0
Set(0) {}
4. How to Delete a Specific Element From a Set Object
You can delete a specific element from a Set object (if it exists) using the delete() method. This method accepts the value to be deleted from the Set. If the value is found, the method returns true. Otherwise, it'll be false.
const setObj = new Set([1, 2, 3, 4, 5]);
console.log("Initial Set:");
console.log(setObj);
setObj.delete(3);
console.log("Set after deleting 3");
console.log(setObj);
Output:
Initial Set:
Set(5) { 1, 2, 3, 4, 5 }
Set after deleting 3
Set(4) { 1, 2, 4, 5 }
5. How to Check If an Element Exists in a Set
You can check whether an element exists in a Set object using the has() method. This method accepts the value as a parameter to test for presence in the Set object. If the element is found, the method returns true; otherwise it'll be false.
const setObj = new Set(["Welcome", "to", "MUO"]);
console.log(setObj.has("MUO"));
console.log(setObj.has("MakeUseOf"));
Output:
true
false
6. What's the entries() Method in the JavaScript Set Object?
According to the official MDN Web Docs:
"The entries() method returns a new Iterator object that contains an array of [value, value] for each element in the Set object, in insertion order. For Set objects, there is no key like in Map objects. However, to keep the API similar to the Map object, each entry has the same value for its key and value here, so that an array [value, value] is returned."
const setObj = new Set(["Welcome", "to", "MUO"]);
for(let entry of setObj.entries()) {
console.log(entry);
}
Output:
[ 'Welcome', 'Welcome' ]
[ 'to', 'to' ]
[ 'MUO', 'MUO' ]
const setObj = new Set(["Welcome", "to", "MUO"]);
for(let [key, value] of setObj.entries()) {
console.log(value);
}
Output:
Welcome
to
MUO
The keys and values in the Set are identical.
const setObj = new Set(["Welcome", "to", "MUO"]);
for(let [key, value] of setObj.entries()) {
console.log(key === value);
}
Output:
true
true
true
7. What's the forEach() Method in the JavaScript Set Object?
The forEach() method invokes a function for each element of the Set object. This method returns undefined.
const setObj = new Set([1, 2, 3, 4, 5]);
let sum = 0;
setObj.forEach(function(element) {
sum += element;
});
console.log(sum);
Output:
15
8. What's the values() Method in the JavaScript Set Object?
The values() method returns an Iterator object that contains all the values in a Set, and it does this in insertion order.
const setObj = new Set([1, 2, 3, 4, 5]);
const iteratorObj = setObj.values();
for (let value of iteratorObj) {
console.log(value);
}
Output:
1
2
3
4
5
Note: A Set object in JavaScript has no keys. But to make Sets compatible with Maps, the keys() method is used as an alias for the values() method. The keys() method behaves exactly the same as the values() method.
Now You Know How to Create Sets in JavaScript
So, there you have it. Having read this article, you should have plenty to help you master creating Sets on JavaScript.
Creating Sets is crucial for any programmer looking to up their game. Once you've mastered this, you can move on to perfecting other skills—such as creating Arrays.