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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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
1 | console.log(mySet.size); // 4 |
Check value exists in Set
1 2 | console.log(mySet.has('11')); // true console.log(mySet.has('age')); // false |
Delete an element from the Set
1 2 3 4 | 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
1 2 | mySet.clear(); console.log(mySet); // Set(0) {} |
Again adding elements to Set
1 2 3 4 | 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
1 | console.log(mySet.keys()); // SetIterator {11, "John", {x: 2, y: 3}} |
Get values of the Set
1 | console.log(mySet.values()); // SetIterator {11, "John", {x: 2, y: 3}} |
Get elements of the mySet
1 2 3 4 5 6 7 | 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.
1 2 3 4 5 6 7 8 9 10 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // 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
1 2 3 4 5 6 7 | 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
1 2 3 4 | var multiArray = [ ['id', 5], ['name', 'John'] ]; |
Convert Array object into Set object
1 2 3 4 5 | // 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
1 2 3 4 5 | // 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.
Find me on
Mukesh Chapagain is a graduate of Kathmandu University (Dhulikhel, Nepal) from where he holds a Masters degree in Computer Engineering. Mukesh is a passionate web developer who has keen interest in open source technologies, programming & blogging. 
