• Get application security done the right way! Detect, Protect, Monitor, Accelerate, and more…
  • 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 👨‍💻