Prev Next

JavaScript Set Methods

Sets provide several methods for managing their contents. Understanding these methods helps you efficiently work with unique collections.

Key Topics

add(), has(), delete()

add() inserts a value, has() checks for existence, and delete() removes a value.

let s = new Set();
s.add("X");
console.log(s.has("X"));
s.delete("X");
console.log(s.has("X"));

Output

> true

> false

Explanation: After adding "X", has() returns true. Once deleted, it returns false.

clear(), size

clear() removes all elements, and size returns the number of elements in the set.

s.add("A");
s.add("B");
console.log(s.size);
s.clear();
console.log(s.size);

Output

> 2

> 0

Explanation: Before clearing, size is 2. After clearing, the set is empty with size 0.

keys(), values(), entries()

These methods return iterators for keys, values, and entries. For sets, keys and values are the same, and entries return pairs [value, value].

JavaScript Usage in DOM

Use set methods to manage unique elements representing user actions or unique data items, then display them on the webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set Methods in DOM</title>
</head>
<body>
    <h1>Set Methods Demo</h1>
    <button onclick="manageSet()">Manage Set</button>
    <p id="output"></p>

    <script>
        function manageSet() {
            let uniqueValues = new Set(["Val1", "Val2"]);
            uniqueValues.add("Val3");
            uniqueValues.delete("Val1");
            document.getElementById("output").textContent = "Set size: " + uniqueValues.size;
        }
    </script>
</body>
</html>

Key Takeaways

  • add/has/delete: Manage individual elements in sets.
  • clear/size: Clear sets and check their length.
  • keys/values/entries: Iterate through set elements easily.
  • DOM Integration: Dynamically manage and show unique sets of data.
Prev Next