DEV Community 👩‍💻👨‍💻

Cover image for Built-In Set Object
Moazam Ali
Moazam Ali

Posted on

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 
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

 

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 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

 

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
Enter fullscreen mode Exit fullscreen mode

 

Wrapping up!

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

💻 Happy Coding

Top comments (0)

Git push

Stop by this week's meme thread!