by Asif Norzai

Let's learn about Set and its unique functionality in JavaScript ?

yHYXOoOwWcn1h5cpOX41qpwb7KkEVbKQTqfy
Don’t be a duplicate or else Set will catch you

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. ?

9HUfTsuNCDKzpF6NJsItRYlX-68khdXAb9hk

Before you go: if you liked this post, follow me on here and also on Twitter, where I post and retweet web-related content.