Understanding the JavaScript For...of Loop

This tutorial explains how to use For...of loop in javascript programming language. The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, Array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object.

Syntax:

for (variable of iterable) {
  statement
}

• variable - For every iteration the value of the property is assigned to the the variable.
• iterable - An object which has enumerable properties and can be iterated upon.

lets see the below examples of for...of loop :

Using Array :

const iterable = ['A', 'B', 'C'];

for (const value of iterable) {
  console.log(value);
}

Output:
-----------------------

> "A"
> "B"
> "C"

Using Map :

const iterable = new Map([['A', 1], ['B', 2]]);

for (const [key, value] of iterable) {
  console.log(`Key: ${key} and Value: ${value}`);
}

Output:
-----------------------

> "Key: A and Value: 1"
> "Key: B and Value: 2"

Using Set :

const iterable = new Set([1, 3, 2, 2, 4]);

for (const value of iterable) {
  console.log(value);
}

Output:
-----------------------

> 1
> 3
> 2
> 4

Using Generators :

function* generator(){ 
  yield 1; 
  yield 2; 
  yield 3; 
}; 

for (const g of generator()) { 
  console.log(g); 
}

Output:
-----------------------

> 1
> 2
> 3

Using String:

const iterable = 'skpricks';

for (const value of iterable) {
  console.log(value);
}

Output:
-----------------------

> "s"
> "k"
> "p"
> "r"
> "i"
> "c"
> "k"
> "s"

Using Arguments Object :

function args() {
  for (const arg of arguments) {
    console.log(arg);
  }
}

args('a', 'b', 'c', 'd');

Output:
-----------------------

> "a"
> "b"
> "c"
> "d"

Plain objects are not iterable : 

Just remember For...of loop can't iterate plain objects. lets check the below example, which throw error message while iterating plain javascript objects.

const obj = { a: 'skptricks', b: 'php' };

for (const value of obj) { 
    console.log(value);
}

Output:
-----------------------

Error: obj is not iterable

if you are remember For...of loop only supports array like objects. Here in this example we are converting an array-like object to an Array using Array.from(obj) and object would have a length property and its element would have to be indexed. lets check the below example :
NOTE : Array.from() method creates a new Array instance from an array-like or iterable object.

const obj = {length: 2, 0: 'skptricks', 1: 'php' };

const array = Array.from(obj);
for (const value of array) { 
    console.log(value);
}

Output:
-----------------------

> "skptricks"
> "php"

This is all about For...of loop in javascript programming language. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.