Object Iterables

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:

a
b
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

10
20
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

10
20
30
40
50
60
70
80
90