Remove Element from Set in JavaScript [SOLVED]

Different data structures have their own design which is helpful in solving particular problems. Arrays are good when we need a sequence (or collection) of data values, and sets are useful when we need a collection of unique data values.

As with arrays, there are ways to update them, and within this article, we will discuss how to remove (or delete) the data values from the unique collection called set.

 

What is set in JavaScript?

As stated earlier, sets in JavaScript are collections of unique data values of any data type from the primitive type to the object type. Sets, like arrays, can be iterated over based on their insertion order. The insertion can occur from initialization (via an array) or through the add method which will pass an argument - a data value. In Sets, the value equality is based SameValueZero algorithm which sees NaN equal to NaN and 0 equal to -0.

Let’s create a set using the SetConstructor and show you how to add data values to it via the add() method.

const unique = new Set();

unique.add("one");
unique.add("one");
unique.add("two");

console.log(unique);

Output

Set(2) { 'one', 'two' }

Notice that even though we added the string "one" twice, it wasn’t, and that’s because Set maintains the uniqueness of every data value.

We can create a set by passing arrays as below

const faang = new Set(["facebook", "amazon", "apple", "netflix", "google"]);

console.log(faang);

Output

Set(5) { 'facebook', 'amazon', 'apple', 'netflix', 'google' }

Use delete() method to delete element from set

To remove from Set in JavaScript, we need to have the specific value and pass it as the argument of the delete method. It removes the specified value from the Set object if it is there and returns a Boolean value if the value was there (true) or not (false).

Let’s try with a simple set with primitive values ranging from strings, and numbers to Booleans. First, we assigned a symbol (sym), and created the unique Set, and logged it. Afterward, we used the delete method to remove the string "twelve", and log the unique Set to see the change.

let sym = Symbol();
const unique = new Set(["twelve", 23, true, sym]);
console.log(unique);

console.log(unique.delete("twelve"));
console.log(unique);

Output

Set(4) { 'twelve', 23, true, Symbol() }
true
Set(3) { 23, true, Symbol() }

The second line is true because "twelve" was present in the unique Set, and the third line shows that the string has been removed.

However, how do we remove from Set in JavaScript when its content is an object? By checking through each iteration for the specific identifier.

Here, the specific identifier is the index key, and so by looping through the set (as it is an iterable) using forEach, we can use an if statement to specify which value to delete using the delete method.

const unique = new Set([
    { index: 0, value: "twelve" },
    { index: 1, value: "eleven" },
    { index: 2, value: "twelve" },
]);

console.log(unique);

unique.forEach((object) => {
    if (object.index == 1) {
        unique.delete(object);
    }
});

console.log(unique);

Output

Set(3) {
  { index: 0, value: 'twelve' },
  { index: 1, value: 'eleven' },
  { index: 2, value: 'twelve' }
}
Set(2) { { index: 0, value: 'twelve' }, { index: 2, value: 'twelve' } }

So, using the if statement, we were able to specify that where the object’s index was equal to 1, we delete such an object. The second set in the output shows that’s what happened.

 

Summary

Sets are great for maintaining collections of unique values, and to learn to remove from set in JavaScript is another knowledge that’s important in understanding JavaScript better. Here, we have learned how to remove from set in JavaScript using the delete method.

 

References

Set - JavaScript | MDN (mozilla.org)
Set.prototype.delete() - JavaScript | MDN (mozilla.org)