Object 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

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:

a
b
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:

a
b
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,a
b.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