JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
Object Sets
A JavaScript Set is a collection of unique values.
Each value can only occur once in a Set.
A Set can store any value of any data type.
Set Methods
Method | Description |
new Set() | Creates a new Set |
add() | Adds a new element to the Set |
delete() | Removes an element from a Set |
has() | Returns true if a value exists |
clear() | Removes all elements from a Set |
forEach() | Invokes a callback for each element |
values() | Returns an Iterator with all the values in a Set |
keys() | Same as values() |
entries() | Returns an Iterator with the [value, value] pairs from a Set |
Property | Description |
size | Returns the number of elements in a Set |
How to Create a Set
Create a JavaScript Set by:
- Passing an Array to a new Set().
- Create a new Set and use add() to add values.
- Create a new Set and use add() to add variables.
The new Set() Method
Pass an Array to the new Set() constructor:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Create a Set from an Array:</p>
<p id=”demo”></p>
<script>
// Create a Set
const letters = new Set([“a”,”b”,”c”]);
// Display set.size
document.getElementById(“demo”).innerHTML = letters.size;
</script>
</body>
</html>
Output
JavaScript Sets
Create a Set from an Array:
Create a Set and add literal values:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add values to a Set:</p>
<p id=”demo”></p>
<script>
// Create a Set
const letters = new Set();
// Add Values to the Set
letters.add(“a”);
letters.add(“b”);
letters.add(“c”);
// Display set.size
document.getElementById(“demo”).innerHTML = letters.size;
</script>
</body>
</html>
Output
JavaScript Sets
Add values to a Set:
3
Create a Set and add variables:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add variables to a Set:</p>
<p id=”demo”></p>
<script>
// Create a Set
const letters = new Set();
// Create Variables
const a = “a”;
const b = “b”;
const c = “c”;
// Add the Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);
// Display set.size
document.getElementById(“demo”).innerHTML = letters.size;
</script>
</body>
</html>
Output
JavaScript Sets
Add variables to a Set:
3
The add() Method
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Adding new elements to a Set:</p>
<p id=”demo”></p>
<script>
// Create a new Set
const letters = new Set([“a”,”b”,”c”]);
// Add a new Element
letters.add(“d”);
letters.add(“e”);
// Display set.size
document.getElementById(“demo”).innerHTML = letters.size;
</script>
</body>
</html>
Output
JavaScript Sets
Adding new elements to a Set:
5
Adding equal elements, only the first will be saved:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Adding equal elements to a Set:</p>
<p id=”demo”></p>
<script>
// Create a Set
const letters = new Set();
// Add values to the Set
letters.add(“a”);
letters.add(“b”);
letters.add(“c”);
letters.add(“c”);
letters.add(“c”);
letters.add(“c”);
letters.add(“c”);
letters.add(“c”);
// Display set.size
document.getElementById(“demo”).innerHTML = letters.size;
</script>
</body>
</html>
Output
JavaScript Sets
Adding equal elements to a Set:
3
The forEach() Method
The forEach() method invokes a function for each Set element:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>forEach() calls a function for each element:</p>
<p id=”demo”></p>
<script>
// Create a Set
const letters = new Set([“a”,”b”,”c”]);
// List all Elements
let text = “”;
letters.forEach (function(value) {
text += value + “<br>”;
})
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
JavaScript Sets
forEach() calls a function for each element:
ab
c
The values() Method
The values() method returns an Iterator object consisting of all the values in a Set:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.values() returns a Set Iterator:</p>
<p id=”demo”></p>
<script>
// Create a Set
const letters = new Set([“a”,”b”,”c”]);
// Display set.size
document.getElementById(“demo”).innerHTML = letters.values();
</script>
</body>
</html>
Output
JavaScript Sets
Set.values() returns a Set Iterator:
[object Set Iterator]
Use the Iterator object to access the elements:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Iterating Set values:</p>
<p id=”demo”></p>
<script>
// Create a Set
const letters = new Set([“a”,”b”,”c”]);
// List all Elements
let text = “”;
for (const x of letters.values()) {
text += x + “<br>”;
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
JavaScript Sets
Iterating Set values:
ab
c
The keys() Method
A Set has no keys.
keys() returns the same as values().
This makes Sets compatible with Maps.
Example
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.keys() returns a Set Iterator:</p>
<p id=”demo”></p>
<script>
// Create a Set
const letters = new Set([“a”,”b”,”c”]);
// Display set.size
document.getElementById(“demo”).innerHTML = letters.keys();
</script>
</body>
</html>
Output
JavaScript Sets
Set.keys() returns a Set Iterator:
[object Set Iterator]
The entries() Method
A Set has no keys.
keys() returns the same as values().
This makes Sets compatible with Maps.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>entries() Returns an Iterator with [value,value] pairs from a Set:</p>
<p id=”demo”></p>
<script>
// Create a Set
const letters = new Set([“a”,”b”,”c”]);
// List all entries
const iterator = letters.entries();
let text = “”;
for (const entry of iterator) {
text += entry + “<br>”;
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
JavaScript Sets
entries() Returns an Iterator with [value,value] pairs from a Set:
a,ab.b
c,c
Sets are Objects
For a Set, typeof returns object:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets Objects</h2>
<p>The type of operator returns object:</p>
<p id=”demo”></p>
<script>
// Create a new Set
const letters = new Set([“a”,”b”,”c”]);
// Display typeof
document.getElementById(“demo”).innerHTML = typeof letters;
</script>
</body>
Output
JavaScript Sets Objects
The type of operator returns object:
object
For a Set, an instance of Set returns true:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>The instance of operator returns true:</p>
<p id=”demo”></p>
<script>
// Create a new Set
const letters = new Set([“a”,”b”,”c”]);
// Display typeof
document.getElementById(“demo”).innerHTML = letters instanceof Set;
</script>
</body>
</html>
Output
JavaScript Sets
The instance of operator returns true:
true