JS Sets

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

JavaScript Sets

How to Create a Set

JavaScript Set can be created by:

  • Passing an Array to new Set().
  • Creating a new Set and using add() to add values.
  • Creating a new Set and using add() to add variables

The new Set() Method

Passing 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 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

The forEach() Method

The forEach() method invokes (calls) 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:

a
b
c

The values() Method

The values() method is used to return a new iterator object that consists 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]

Now you can 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:

a
b
c

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420