JavaScript Iterables

Iterable objects are iterables (like Arrays). Accessing iterables requires just short, effective code. Using for..of loops, iterables may be repeated over and again.

lterables over a string

A for..of loop may be used to repeatedly traverse through a string's components. Because a string is an iterable object in JavaScript, we can iterate through its characters using a for...of loop.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Iterating Over a String</h1>
<script>
    const name = "WebTutor.dev";

    let result = ""
    for (const x of name) {
        result += x + "<br>";
    }

    document.write(result);
</script>

</body>
</html>

Preview

lterables over an array

An Array's items can be iterated through using a for..of loop. Arrays are iterable objects in JavaScript, which means we can traverse through their elements using a for...of loop or other iterable methods.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Iterating Over an Array</h1>
<script>
    const lang = ["HTML", "CSS", "Javascript", "jQuery"];

    let result = ""
    for (const x of lang) {
        result += x + "<br>";
    }

    document.write(result);
</script>

</body>
</html>

Preview

lterables over a set

A for..of loop may be used to repeatedly traverse through a Set's components. Set objects are iterable in JavaScript, allowing us to traverse through their values using a for...of loop or other iterable techniques.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Iterating Over a Set</h1>
<script>
    const lang = new Set(["HTML", "CSS", "Javascript", "jQuery"]);

    let result = ""
    for (const x of lang) {
        result += x + "<br>";
    }

    document.write(result);
</script>

</body>
</html>

Preview

lterables over a map

A for..of loop may be used to repeatedly traverse through a map's components. Because Map objects in JavaScript are iterable, we may traverse over their key-value pairs using a for...of loop or other iterable methods.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Iterating Over a Map</h1>
<script>
    const lang = new Map([
        ["HTML", 95],
        ["CSS", 90],
        ["Javascript", 92],
        ["jQuery", 97]
    ]);

    let result = ""
    for (const x of lang) {
        result += x + "<br>";
    }

    document.write(result);
</script>

</body>
</html>

Preview

JS Break

JS Sets

JavaScript Iterables

lterables over a string

Example

lterables over an array

Example

lterables over a set

Example

lterables over a map

Example

Links

Tutorials

Connect with us