Built-In Set Object

Set

Set is a built-in JavaScript object introduced in the ES6 version of JavaScript. The JavaScript Set objects lets you store unique values of any datatype whether primitive or object references.

In other words, it is a collection of values where each value may occur only once in the Set object. You can iterate through unique values of a set object in their insertion order (The order in which elements are inserted to the set object using Set.add() method).

Creating a Set

JavaScript Set object can be created by:

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

Using new Set()

To create a JavaScript Set object you need to pass an Array of values to the new Set() constructor. For example,

// creating a set object
const colors = new Set(["red", "green", "blue"]);

// logging the size of a set object
console.log(colors.size); // output: 3 

Here we are passing the Array of string values to the constructor i.e. new Set().

Using Set.add()

Another way of creating a JavaScript Set is by creating a set object using the new Set() constructor and then adding values to it using the Set.add() method. For example,

// creating a set object
const colors = new Set();

// adding values
colors.add("red");
colors.add("green");
colors.add("blue");

// logging the size of set object
console.log(colors.size); // output: 3 

In this example, we are adding three string values to the set object. The Set.add() method takes a single parameter which can be a value or a variable.

We can also pass variables to the Set.add() method. For example,

// creating a set object
const colors = new Set();

// declaring and initializing variables
let r = "red";
let g = "green";
let b = "blue";

// adding values
colors.add(r);
colors.add(g);
colors.add(b);

// logging the size of a set object
console.log(colors.size); // output: 3 

If you add the same value multiple times only the first value will be saved in the set object. For example,

// creating a set object
const colors = new Set();

// adding values
colors.add("red");
colors.add("green");
colors.add("green");
colors.add("green");
colors.add("blue");

// logging the size of a set object
console.log(colors.size); // output: 3 

Using Set.delete()

The Set.delete() method is used to delete a value from the Set object. You need to pass the value to the Set.delete() method that you want to delete. For example,

// creating a set object
const colors = new Set();

// adding values
colors.add("red");
colors.add("green");
colors.add("blue");

// deleting element
colors.delete("green");

// logging the size of a set object
console.log(colors.size); // output: 2 

The green value has been deleted from the object.

Using Set.clear()

The Set.clear() method is used to delete all values from the set object. For example,

// creating a set object
const colors = new Set();

// adding values
colors.add("red");
colors.add("green");
colors.add("blue");

// deleting all elements
colors.clear();

// logging the size of set object
console.log(colors.size); // output: 0

Iterating Set with forEach()

The set object can be iterated using the Set.forEach() method. Set.forEach() invokes a callback for each value in the Set. For example,

// creating a set object
const colors = new Set();

// adding values
colors.add("red");
colors.add("green");
colors.add("blue");

// iterating over set values
colors.forEach((value) => {
    console.log(`${value}`);
});

// Output:
// red
// green
// blue

Wrapping up!

That's all for this post, thanks for reading. Catch you later.

💻 Happy Coding

Moazam AliFollow

Frontend Developer who is always passionate in discovering new stuff and building networks.