Javascript: Set object & Loop

A Set object holds the unique values of any type like array or object. An array or any other iterable object can be passed to Set.

– It’s a new data structure introduced in JavaScript ECMAScript 6 (ES6).
– It has useful methods for iteration over the Set values.

var mySet = new Set();

mySet.add(11);
console.log(mySet); // Set(1) {11}

mySet.add('John');
console.log(mySet); // Set(2) {11, "John"}

// 11 will not be added as it's the duplicate value 
// which is already present in the Set object
mySet.add(11);
console.log(mySet); // Set(2) {11, "John"}

// '11' will be added to the Set object
// because it's a string and the value 11 present in the Set is integer
// so these two are different values, hence get stored in the Set object
mySet.add('11');
console.log(mySet); // Set(3) {11, "John", "11"}

var myObj = {x: 2, y: 3};
mySet.add(myObj);
console.log(mySet); // Set(4) {11, "John", "11", {x: 2, y: 3}}

Get size of the Set

console.log(mySet.size); // 4

Check value exists in Set

console.log(mySet.has('11')); // true
console.log(mySet.has('age')); // false

Delete an element from the Set

mySet.delete('11');
console.log(mySet); // Set(3) {11, "John", {x: 2, y: 3}}
console.log(mySet.has('11')); // false 
console.log(mySet.has(11)); // true

Delete all key-value pairs of the mySet

mySet.clear();
console.log(mySet); // Set(0) {}

Again adding elements to Set

mySet.add(11);
mySet.add('John');
mySet.add(myObj);
console.log(mySet); // Set(3) {11, "John", {x: 2, y: 3}}

Get keys and values of the Set object

– There’s no key-value pairs in Set like it is on Map.
– Hence, the keys() and values() functions return the same.
– Both return Iterator object containing the values of the Set object

Get keys of the Set

console.log(mySet.keys()); // SetIterator {11, "John", {x: 2, y: 3}}

Get values of the Set

console.log(mySet.values()); // SetIterator {11, "John", {x: 2, y: 3}}

Get elements of the mySet

for (let element of mySet) {
  console.log(element);
}
// Output:
// 11
// John
// {x: 2, y: 3}

Print key value pairs

entries() function returns the Iterator object containing the [value, value] array for each element.

console.log(mySet.entries()); // SetIterator {11, "John", {x: 2, y: 3}}

// print key-value pairs
for (let [key, value] of mySet.entries()) {
  console.log(key + " - " + value);
}
// Output: 
// 11 - 11
// John - John
// [object Object] - [object Object]

The keys and values of the Set are the same

// Print keys of the Set
for (let key of mySet.keys()) {
  console.log(key);
}
// Output:
// 11
// John
// {x: 2, y: 3}

// Print values of the Set
for (let value of mySet.values()) {
  console.log(value);
}
// Output:
// 11
// John
// {x: 2, y: 3}

Iterating mySet object with forEach() function

mySet.forEach(function(value) {
    console.log(value);
});
// Output: 
// 11
// John
// {x: 2, y: 3}

CONVERT ARRAY INTO SET & CONVERT SET INTO ARRAY

Creating Set object with multi-dimensional array as iterable

var multiArray = [
    ['id', 5],
    ['name', 'John']
];

Convert Array object into Set object

// this creates a key-value pair
var mySet = new Set(multiArray);

// JSON.stringify() method is used to print the array
console.log(mySet); // Set(2) {Array(2), Array(2)}

Convert Set into Array

// Array.from() method is used to do so
var setToArray = Array.from(mySet);

// JSON.stringify() method is used to print the array
console.log(JSON.stringify(setToArray)); // [["id",5],["name","John"]]

Hope this helps. Thanks.