Warning: session_start(): open(/tmp/sess_62b42d1a7a35032186a31fcee639813f, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Iterate Over The Elements In A Set In JavaScript - LearnShareIT

How To Iterate Over The Elements In A Set In JavaScript

Iterate over the Elements in a Set using JavaScript

In JavaScript, you can iterate over the elements in a set using JavaScript with many methods like using the .forEach() function, using the for...of loop or creating an Iterator object from the Set. Read this article to learn more.

Iterate over the elements in a set using JavaScript

Preface on the Set class

This chapter will briefly explain the Set class. If you already understand it, you can skip to the next part.
The Set class is a collection of values of any type, be it an integer, string, or even a data reference.

Though a big thing to note is that each value is unique, i.e., every value cannot have duplicates. An important thing about the Set class is how values are accessed. In a regular Array, it is accessed by index (e.g., index 0 is the first value, index 4 is the 3rd value, etc.); However, in a Set, values cannot be accessed without iterating over it.

On another note, the Set class has a quirk where you cannot add values to the beginning or middle without some extra fiddling; you can only add values to the end of the list.

Another thing of note is the Set class’ .has() function, which functions similarly to the Array class’ .include() function. Though specifically, on average, the .has() function has been shown to perform better than the .include() function.

Using the .forEach() function

Syntax:

Set.prototype.forEach(function callFunc(value, key, set) {}, thisArg)

The Set class’ .forEach() function, similar to the .forEach() function in other classes like the Array or Map class, executes the callBack parameter (i.e., a callback function) for each iteration of the collection and has the iterated value as the functions parameter.

The callFunc function parameter has 3 parameters: value, key and set. The value parameter, as the name implies, is the current iterated value; However, confusingly, the key parameter is just another alias for the value, so the two parameters are the same thing. The set parameter represents the Set currently being iterated on.

With these things in mind, we have as much:

Code:

const set = new Set(["1", "LearnShareIT", 32]);

set.forEach(function(v, k, s) {
	// Print out the value
	console.log(v);
});

Output:

"1"
"LearnShareIT"
32

Note that since callFunc is an anonymous function (i.e., a function without a name), it can be written as ()=>{}, as such:

Code:

const set = new Set(["1", "LearnShareIT", 32]);

set.forEach((v, k, s) => {
	// Print out the value
	console.log(v);
});

Using a for...of loop

Syntax:

for (variable of iteratableObject) { ... }

The for...of the loop is a for loop that uses the of keyword and has the specific function of iterating collections, such as Arrays or Sets. There are three general ways of iterating over Sets, all three are identical practically:

Code:

const set = new Set(["1", "LearnShareIT", 32]);

// First way
for (const v of set) {
	console.log(v);
}

// Second way
for (const v of set.keys()) {
	console.log(v);
}

// Third way
for (const v of set.values()) {
	console.log(v);
}

Output:

"1"
"LearnShareIT"
32

Using an Iterator object

An Iterator object is an object that defines a sequence that can only be iterated once. Specifically, it contains the .next() function, which returns an object containing two keys: The "value" key which is the current value or key-values being iterated over; and the "done" key, which defines whether the sequence has been iterated completely.

The Set class has two ways of returning an Iterator object: Using the .entries() function which will return Iterators that has key-value pairs (though the key is the same as the value in the case of the Set class); or using the [Symbol.iterator]() method which returns Iterators that has values only.

There are two ways of iterating over an Iterator object: With a while loop and a for...of loop. Both will be coverved:

Code: (while loop method)

const set = new Set(["1", "LearnShareIT", 32]);
const iterators = set[Symbol.iterator]();
const entries = set.entries();

// Iterate until .done returns false
while (!(iterator = iterators.next()).done) {
	console.log(iterator.value);
}

// Iterate until .done returns false
while (!(entry = entries.next()).done) {
	console.log(entry.value[0]);
}

Code: (for...of loop method)

const set = new Set(["1", "LearnShareIT", 32]);
const iterators = set[Symbol.iterator]();
const entries = set.entries();

for (const value of iterators) {
	// iterator = { value: value, done: true/false }
	console.log(value);
}

for (const value of entries) {
	// iterator = { value: [ key, value ], done: true/false }
	console.log(value[0]);
}

Output:

"1"
"LearnShareIT"
32

Summary

In summary, you can iterate over the elements in a set using JavaScript with three methods we mention above. Let’s choose the best method for you. Thanks for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *