JavaScript Iterators

Javascript iterator is used to navigate a list or collection using an object or pattern. Iterators are used the following () method that returns an object with the value. It is done to implement the iterator protocol, which defines and returns the sequences. The iterator sequence's next value is contained in the value, and the done condition is either true or false in boolean form. It is true or false, depending on whether the sequence's final value has been eaten.

We can determine whether the entity is automatically iterable or not. We can look at its prototype to determine the possibility that it has the method Symbol(Symbol.iterator).

We may locate the Symbol(Symbol.iterator): values() method in Array.prototype. The array can be iterated by default. Additionally, because each of their prototype objects has a Symbol.iterator() method, String, Map, and Set are built-in iterables.

Issues with the for loop

The variable is used by the for loop to keep track of the index of the ranks array. Every time the loop runs, the value of the iterable variable increases, with the value remaining lower than the total number of elements in the rankings array.

When a loop is nested inside another loop, the system's complexity increases using a javascript loop. Additionally, it is difficult to avoid mistakes when managing several variables inside loops.

Examples

To reduce the complexity of the conventional loop and prevent errors from being made by remembering loop indexes, ES6 added a new loop construct called the "for...of" loop.

Example 1: the following example shows javascript iterable with the array numbers.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables to know for loop issues </h2>
</p>
<script>
// Create an Object of the array
let datas = ['Aaa', 'Bbb', 'Ccc', 'Dd', 'Ee'];
for (let a = 0; a < datas.length; a++) {
console.log(datas[a]);
}
</script>
</body>
</html>

Output

The iterable function shows the numbers in the loop.

Example 2

The following example shows the for loop with the variable. Here we can use a loop each time for the information.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables to know for loop issues </h2>
<p id="demo_val"></p>
<script>
// Create a String to work as an array
const name_val = "javatpoint";
// List all Elements of the string
let text_val = ""
for (const x of name_val) {
text_val += x + "<br>";
}
document.getElementById("demo_val").innerHTML = text_val;
</script>
</body>
</html>

Output

The iterable function shows the numbers in the loop.

Procedures for iteration

JavaScript provides an iteration protocol for data structures. The for...of loop used in this protocol specifies how the data entities are iterated to completion.

The protocol's notion can be broken down into:

Iterable in javascript
Iterator in javascript

According to the iterable protocol, an iterable must contain the Symbol.iterator key.

Iterables in JavaScript

Iterables are the name for data structures with the Symbol.iterator() method. Arrays, strings, sets, etc., are a few examples.

An iterator is called an iterator when an object implements an interface (or API) that provides the following two responses.

Is there still a piece?
If so, what exactly is the element?

A technical definition of an iterator is an object with a next() method that produces an object with the following two properties:

Done: a boolean value showing if additional elements are available for iteration. The current element is used as an iterable object's value.

Iterators in JavaScript

The Symbol.iterator() method returns an object known as an iterator.
The next() method of the iterator protocol enables one-at-a-time access to each element of the iterable (data structure).

Examples

The following examples show the basic iterable of the number and character data of the array.

Example 1: the following example shows javascript iterable with the array numbers.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables </h2>
<p> We can determine whether the entity is automatically iterable using Symbol(Symbol.iterator).
</p>
<p id = "demo_value">
</p>
<script>
// Create an Object of the array
my_value = {};
// Make it Iterable
my_value[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n1 += 15;
if (n1 == 150) {done = true}
return {value:n1, done:done};
}
};
}
let text_value = ""
for (const num_value of my_value) {
text_value += num_value +"<br>"
}
document.getElementById("demo_value").innerHTML = text_value;
</script>
</body>
</html>

Output

The iterable function shows the numbers in the loop.

Example 2: the following example shows javascript iterable with the number of the array using the next() method.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables </h2>
<p> We can determine whether the entity is automatically iterable using the next method ().
</p>
<p id = "demo_value">
</p>
<script>
// Iterable method and value
function my_Numbers() {
let n1 = 0;
return {
next: function() {
n1 += 20;
return {value:n1, done:false};
}
};
}
// Create Iterable
const n1 = my_Numbers();
n1.next(); // 20
n1.next(); // 40
n1.next(); // 60
//output: 80
document.getElementById("demo_value").innerHTML = n1.next().value;
</script>
</body>
</html>

Output

The iterable function shows the data in the loop.

Example 3: the following example shows javascript iterable with the number of the array using the Symbol(Symbol.iterator) method.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables </h2>
<p> We can determine whether the entity is automatically iterable using Symbol(Symbol.iterator).
</p>
<p id = "demo_value">
</p>
<script>
// Create an Object of the array
my_value = {};
// Make it Iterable of the array
my_value [Symbol.ite rator] = function() {
let n1 = 0;
done = false;
return {
next() {
n1 += 30;
if (n1 == 200) {done = true}
return {value:n1, done:done};
}
};
}

let text_value = ""
for (const num_value of my_value) {
text_value  += num_value +"<br>"
}
console.log(text_value);
</script>
</body>
</html>

Output

The iterable function shows the data in the loop.

The function of the iterable argument

You do not need to develop the iterators for the Array, Set, and Map group types because ES6 already has them built-in.

The program constructs an array object that returns a collection of numbers between (start, finish) with a gap between each one.

Examples

The examples show the procedure of the functions of the iterable argument.

Example 1: the example shows the particular array of information with the iterable function. The first value is the initial value, the last is the last, and the third is the iterable incremental value in the array.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables </h2>
<p> We can determine whether the entity is automatically iterable using Symbol(Symbol.iterator).
</p>
<p id = "demo_value">
</p>
<script>
// Create an Object of the array
class Seq_fun {
constructor( start = 0, end = Infinity, interval = 1 ) {
this.start = start;
this.end = end;
this.interval = interval;
}
[Symbol.iterator]() {
let counter = 0;
let nextIndex = this.start;
return  {
next: () => {
if ( nextIndex <= this.end ) {
let result = { value: nextIndex,  done: false }
nextIndex += this.interval;
counter++;
return result;
}
return { value: counter, done: true };
}
}
}
};
let evenNumbers = new Seq_fun(1, 20, 4);
for (const num of evenNumbers) {
console.log(num);
document.getElementById("demo_value").innerHTML = "please See the Console tab";
}
</script>
</body>
</html>

Output

The iterable function shows the data in the loop.

Example 2: the example shows the particular array of information with the iterable function. The first value is the initial value, the last is the last, and the third is the iterable incremental value in the array. It is used next() and symbol.iterable() method for the numerical data.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables </h2>
<p> We can determine whether the entity is automatically iterable using Symbol(Symbol.iterator).
</p>
<p id = "demo_value">
</p>
<script>
// Create an Object of the array
class Seq_fun {
constructor( start = 0, end = Infinity, interval = 1 ) {
this.start = start;
this.end = end;
this.interval = interval;
}
[Symbol.iterator]() {
let counter = 0;
let nextIndex = this.start;
return  {
next: () => {
if ( nextIndex <= this.end ) {
let result = { value: nextIndex,  done: false }
nextIndex += this.interval;
counter++;
return result;
}
return { value: counter, done: true };
}
}
}
};
let evenNumbers = new Seq_fun(5, 100, 25);
let iterator = evenNumbers[Symbol.iterator]();
let result = iterator.next();
while( !result.done ) {
console.log(result.value);
result = iterator.next();
}
</script>
</body>
</html>

Output

The iterable function shows the data in the loop.

Cleaning up iterable

The [Symbol.iterator]() may optionally return the return() function in addition to the next() method.

The return() method is immediately called when the loop is terminated too soon. It is where the program used for cleaning up all of the assets can be implemented.

Example: the example shows the particular array of information with the iterable function. We can clean the for loop after iterating the value.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables </h2>
<p> We can determine whether the entity is automatically iterable using Symbol(Symbol.iterator).
</p>
<p id = "demo_value">
</p>
<script>
// Create an Object of the array
class Seq_fun {
constructor( start = 0, end = Infinity, interval = 1 ) {
this.start = start;
this.end = end;
this.interval = interval;
}
[Symbol.iterator]() {
let counter = 0;
let nextIndex = this.start;
return  {
next: () => {
if ( nextIndex <= this.end ) {
let result = { value: nextIndex,  done: false }
nextIndex += this.interval;
counter++;
return result;
}
return { value: counter, done: true };
},
return: () => {
console.log('cleaning up...');
return { value: undefined, done: true };
}
}
}
}
let odd_Numbers = new Seq_fun(11, 20, 2);
for (const num of odd_Numbers) {
if( num > 7 ) {
break;
}
console.log(num);
}
</script>
</body>
</html>

Output

The iterable function shows the data with cleaning up in the loop.