Understand JavaScript sets

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

What is a set?

How can I use them in JavaScript?

And what methods are offered to solve the problem?

Let’s find the answers to all your questions in this tutorial.

set

As the name suggests, a set is a collection of unique elements. Repeated values ​​are not saved.

JavaScript sets store elements in insertion order. So they are ordered in JavaScript. and store primitive data types or objects.

Let’s take a look at the JavaScript set syntax.

I’d appreciate it if you had an IDE to do 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 you use them to solve different problems. Properties and methods are easy to create. A method’s functionality can be easily obtained using its name itself. Let’s look at them one by one.

size

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}`);

addition

add method is used to add new elements to the set. If the new element already exists in the set, it will not be added.

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

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

console.log(names);

have

This method takes one argument, has , and returns true if the element is present in the set, false otherwise.

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

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

erase

As you might expect, the delete method takes an argument and removes it from the set. No error is thrown if the specified argument is not present in the set.

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

names.delete("John");

console.log(names);

entry

Method entries Returns an iterator containing an array of key-value pairs in insertion order. Here the 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);

key

Method keys an iterator for the 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 , like the method keys , returns an iterator of set elements in insertion order.

 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 clear method removes all elements from the set.

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

names.clear();

console.log(names);

to each

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

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

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

others

Let’s look at a simple application of sets using a program. Given an array, removes all duplicate values ​​from it. To solve this problem, use the set property.

Let’s see the steps to solve it.

• Initialize the array with dummy data.
• Initialize an empty set.
• Iterates through an array of elements.
  • Add all elements to the set.
  • Duplicate elements will be automatically removed.
• Initialize an empty array.
• Iterate through the set and add all elements to a new array.
• Print a new array.

I hope you can solve it yourself. If you have difficulty coding, please refer to the solutions 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 everything you need to know to work with sets in JavaScript. You can use them in your next project. Go ahead and take advantage of every part.

Have fun coding 👨‍💻