Built-In Set Object
Tags: javascript, tutorial, programming, beginners
Published: 2022-10-18 17:05:18

## 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()`

&nbsp;
## Using `new Set()`

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

```js
// 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()`.

&nbsp;
## 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,

```js
// 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,

```js
// 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,

```js
// 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 
```

&nbsp;
## 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,

```js
// 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.

&nbsp;
## Using `Set.clear()`

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

```js
// 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
```

&nbsp;
## 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,

```js
// 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
```

&nbsp;
## Wrapping up!

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

######💻 Happy Coding

---

{% user moazamdev %}