Sets are a new add-on to JavaScript in ES6. Let’s learn about it.

What are the sets?

How to use them in JavaScript?

And what methods does provide to solve problems?

Let’s find out the answers to all the queries in this tutorial.

Sets

As the name indicates, a set is a collection of unique elements. It doesn’t store the repeated values.

Sets in JavaScript will store the elements in the insertion order. So, they are ordered in JavaScript. And it will store primitive data types or objects.

Let’s see the syntax of the sets in JavaScript.

I hope you have IDE to practice the following.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);
console.log(names);

const randomWord = new Set("Hiiiiiii");
console.log(randomWord);

const numbers = new Set([5, 5, 5, 2, 1, 1, 2, 3]);
console.log(numbers);

Properties and Methods

Sets have different properties and methods that help us work with them to solve different problems. The properties and methods are as simple as creating them. You can easily get the functionality of the methods with their names themselves. Let’s see them one by one.

size

The property size returns the number of elements present in the set.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);
console.log(`Size: ${names.size}`);

add

The method add is used to add a new element to the set. If the new element is already present in the set, then it won’t add it.

// empty set
const names = new Set();

names.add("John");
names.add("Harry");
names.add("Wick");
names.add("Jack");
names.add("Harry");

console.log(names);

has

The method has takes one argument and returns true if the element is present in the set else it returns false.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

console.log(names.has("Harry"));
console.log(names.has("Alley"));

delete

As you expect the method delete takes an argument and deletes it from the set. It doesn’t throw any error even if the given argument is not present in the set.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

names.delete("John");

console.log(names);

entries

The method entries returns an iterator containing arrays of key-value pairs in the insertion order. Here, key and value are the same.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

const entries = names.entries();

console.log(entries.next().value);
console.log(entries.next().value);
console.log(entries.next().value);
console.log(entries.next().value);
console.log(entries.next().value);

keys

The method keys returns an iterator of set elements in the insertion order.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

const keys = names.keys();

console.log(keys.next().value);
console.log(keys.next().value);
console.log(keys.next().value);
console.log(keys.next().value);
console.log(keys.next().value);

values

The method values returns an iterator of set elements in the insertion order similar to the method keys.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

const values = names.values();

console.log(values.next().value);
console.log(values.next().value);
console.log(values.next().value);
console.log(values.next().value);
console.log(values.next().value);

clear

The method clear removes all the elements from the set.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

names.clear();

console.log(names);

forEach

The method forEach is used to iterate over the set and get all the elements one by one from it.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

names.forEach((element) => {
   console.log(element);
});

Miscellaneous

Let’s see a simple application of sets with a program. Given an array remove all the duplicate values from it. To solve the problem, we can make use of the set property.

Let’s see the step to solve it.

  • Initialize an array with dummy data.
  • Initialize an empty set.
  • Iterate over the array of elements.
    • Add every element to the set.
    • It will remove duplicate elements automatically.
  • Initialize an empty array.
  • Iterate over the set and add every element to the new array.
  • Print the new array.

I hope you can solve it yourself. If you find it difficult to code, have a look at the solution below.

const arr = ["John", "Harry", "Wick", "Jack", "Harry"];

const temp = new Set();

arr.forEach((element) => {
   temp.add(element);
});

const newArr = [];

temp.forEach((element) => {
   newArr.push(element);
});

console.log(newArr);

Conclusion

Now, you have all the knowledge that need to work with sets in JavaScript. You can use them in your next project. Go ahead and make use of every bit of it.

Happy Coding 👨‍💻

,
Show Comments