by Asif Norzai
Let's learn about Set and its unique functionality in JavaScript ?
SET ?
ES2015/ES6 gave us a lot of useful tools and features, but one that stands out the most for me is Set. It’s not used to its full potential. I hope to convince you of its worth with this article, so that you can reap the full benefits of this beautiful utility.
So what is Set, you ask?
“The Set
object lets you store unique values of any type, whether primitive values or object references.”, MDN.
Set removes duplicate entries.
Basic Functionality ?
Whenever you want to use Set
, you have to initialize it using the new
keyword and pass in an initial iterable data, leave it blank or null
.
// All valid ways to initialize a set
const newSet1 = new Set();
const newSet2 = new Set(null);
const newSet3 = new Set([1, 2, 3, 4, 5]);
Set utilities/methods ?
add
, like its name suggests, adds new entries to the newly initialized Set const. If at any time a duplicate value gets added to the set, it will be discarded using strict equality
.
const newSet = new Set();
newSet.add("C");
newSet.add(1);
newSet.add("C");
// chain add functionality
newSet.add("H").add("C");
newSet.forEach(el => {
console.log(el);
// expected output: C
// expected output: 1
// expected output: H
});
has
checks to see if the value that you pass in exists in the newSet
const. If the value does exist, it will return the Boolean true
, and it’ll return false
if it doesn’t
const newSet = new Set(["A", 2, "B", 4, "C"]);
console.log(newSet.has("A"));
// expected output: true
console.log(newSet.has(4));
// expected output: true
console.log(newSet.has(5));
// expected output: false
clear
& delete
are two of the most important functionalities of Set
if you want to either remove all entries or delete a specific value.
const newSet = new Set(["A", 2, "B", 4, "C"]);
newSet.delete("C");
// expected output: true
newSet.delete("C");
// expected output: false
newSet.size
// expected output: 4
newSet.clear();
// expected output: undefined
newSet.size
// expected output: 0
keys
and values
both have the same functionality, which is weird if you think about how they behave with JS objects. They both return an iterator
object. This means you can access the .next()
method on it to get its value.
const newSet = new Set(null);
newSet.add("Apples");
newSet.add(12);
let iterator = newSet.keys(); // same as newSet.values();
console.log(iterator.next().value);
// expected output: Apples
console.log(iterator.next().value);
// expected output: 12
console.log(iterator.next().value);
// expected output: undefined
Bring it all together
Let’s create a simple function for a hacker party. The function adds users to the list only if they have the approval of an admin. So you have to have an admin’s name with your entry, which is secret (not in this article, though). At the end of the program, it will say who is invited.
// The Admins
const allowedAdminUsers = new Set(["Naimat", "Ismat", "Azad"]);
// An empty Set, stored in memory
const finalList = new Set();
// A function to add users to permission list
const addUsers = ({user, admin}) => {
// Check to see if the admin is the admin
// list and that the user isn't already in the set
if(allowedAdminUsers.has(admin) && !finalList.has(user)) {
// Return the users list at the end
return finalList.add(user);
}
// Console.log this message if the if the condition doesn't pass
console.log(`user ${user} is already in the list or isn't allowed`);
};
// Add some entries
addUsers({user: "Asep", admin: "Naimat"});
addUsers({user: "John", admin: "Ismat"});
// Lets add John again and this time that inner function console error will be shown
addUsers({user: "John", admin: "Azad"});
const inviationList = [...finalList].map(user =>
`${user} is invited`);
console.log(inviationList);
// Expected output: ["Asep is invited", "John is invited"]
That’s enough functionality for us to use Set today in our projects. ?
Before you go: if you liked this post, follow me on here and also on Twitter, where I post and retweet web-related content.