JavaScript Iterables
Iterable objects are things you can go through using for..of.
In simple terms, iterables need to have the Symbol.iterator method for technical reasons.
Iterating Over a String
You can employ a for..of loop to go through the elements of a string:
Iterating Over an Array
To go through each item in an Array, you can employ a for..of loop.
JavaScript Iterators
The iterator protocol explains how to create a sequence of values from an object.
An item turns into an iterator when it has a next() method.
The next() function should provide an object with two properties:
- data (the subsequent data)
- completed (either true or false)
| value |
The iterator's output value
(Can be skipped if 'done' is true) |
| done |
Returns true when the iterator has finished
false when the iterator has generated a new value. |
Home Made Iterable
This sequence goes on endlessly: 10, 20, 30, 40, and so on. Whenever the next() function is invoked:
The issue with creating your own iterable:
It doesn't work with the JavaScript for..of command.
A JavaScript iterable is something that has a special thing called Symbol.iterator.
The Symbol.iterator is a special function. It gives you another function called next().
You can go through each item in an iterable using this code: for (const x of iterable) { }.
The for..of loop automatically triggers the Symbol.iterator method.
We can also accomplish this task manually.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over a String:</p>
<p id="demo"></p>
<script>
// Create a String
const name = "Propertutorials";
// List all Elements
let text = ""
for (const x of name) {
text += x + " <br> ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!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>
<!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>
<!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>
<!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>
HTML
CSS
Javascript
Jquery