JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
Object Iterables
Iterating Over a String
You can use a for..of loop to iterate over the elements of a string:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over a String:</p>
<p id=”demo”></p>
<script>
// Create a String
const name = “Webhostguru”;
// List all Elements
let text = “”
for (const x of name) {
text += x + “<br>”;
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
JavaScript Iterables
Iterate over a String:
Iterating Over an Array
You can use a for..of loop to iterate over the elements of an Array:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over an Array:</p>
<p id=”demo”></p>
<script>
// Create aa Array
const letters = [“a”,”b”,”c”];
// List all Elements
let text = “”;
for (const x of letters) {
text += x + “<br>”;
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
JavaScript Iterables
Iterate over an Array:
ab
c
JavaScript Iterators
The iterator protocol specifies how to generate a sequence of values from an object.
An object becomes an iterator when it implements a next() method.
The next() method should return an object with two properties:
- value (the next value).
- done (true or false).
Home Made Iterable
This iterable returns never ending: 10,20,30,40,…. Everytime next() is called:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Home Made Iterable:</p>
<p id=”demo”></p>
<script>
// Home Made Iterable
function myNumbers() {
let n = 0;
return {
next: function() {
n += 10;
return {value:n, done:false};
}
};
}
// Create Iterable
const n = myNumbers();
n.next(); // 10
n.next(); // 20
n.next(); // 30
document.getElementById(“demo”).innerHTML = n.next().value;
</script>
</body>
</html>
Output
JavaScript Iterables
Home Made Iterable:
40
A JavaScript iterable is an object that has a Symbol.iterator.
The Symbol.iterator is a function that returns a next() function.
An iterable can be iterated over with the code: for (const x of iterable) { }
Example
// Create an Object
myNumbers = {};
// Make it Iterable
myNumbers[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n += 10;
if (n == 100) {done = true}
return {value:n, done:done};
}
};
}
Now you can use for..of
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p id=”demo”></p>
<script>
// Create an Object
myNumbers = {};
// Make it Iterable
myNumbers[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n += 10;
if (n == 100) {done = true}
return {value:n, done:done};
}
};
}
let text = “”
for (const num of myNumbers) {
text += num +”<br>”
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
JavaScript Iterables
1020
30
40
50
60
70
80
90
The Symbol.iterator method is called automatically by for..of.
But , this can be done “manually”:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p id=”demo”></p>
<script>
// Create an Object
myNumbers = {};
// Make it Iterable
myNumbers[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n += 10;
if (n == 100) {done = true}
return {value:n, done:done};
}
};
}
// Create an Iterator
let iterator = myNumbers[Symbol.iterator]();
let text = “”
while (true) {
const result = iterator.next();
if (result.done) break;
text += result.value +”<br>”;
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
JavaScript Iterables
1020
30
40
50
60
70
80
90