In this section, we will learn what the for-of loop is and how to use it in JavaScript.

What is for of Loop in JavaScript?

The `for of` statement loops through the values of an iterable object.

The topic of `iterable` is a lengthy topic and a couple of sections are written to fully dissect the topic (starting from the iterable section).

For now, just remember that arrays and strings are by default iterable and we can use them with the `for of` statement.

When we apply the `for of` statement on a string, the execution engine will return each character of the target string at each round of iteration.

Also, when we use the `for of` statement on an array, each element in that array will be returned at each round of iteration.

Note: there are other types of iterable objects in JavaScript which we will talk about them in the future lessons and will show you how we can run the for-of statement on them as well.

for of Loop Syntax:

for (var varName of iterableObject){

// body…

}

`for`: to create a `for of` statement, we will start with the keyword `for`.

`varName`: this is the variable that’ll hold each value of the target iterable object.

`iterableObject`: This is the target iterable object we want to take its elements.

`of`: we separate the `varName` from the `iterableObject` via the `of` keyword.

`()`: the whole assignment occurs in the parentheses that come after the `for` keyword.

`{}`: The body of the `for of` statement is defined between the open and close braces `{}`.

Note: every time a value is assigned to the `varName` the body of the loop will be executed as well. This execution keeps occurring until there’s no value left in the `iterableObject`.

Example: JavaScript Iterate Array via for of Loop

const dev = "JavaScript tutorial";
let arr = new Array();
for( let character of dev){
  arr.push(character);
}
console.log(arr);
let newString; 
for (let element of arr){
  if (!newString){
    newString = element;
  }else{
    newString += element;
  } 
}
console.log(newString);

Output:

["J", "a", "v", "a", "S", "c", "r", "i", "p", "t", " ", "t", "u", "t", "o", "r", "i", "a", "l"]

JavaScript tutorial

Example: JavaScript Iterate String via for of loop

const dev = "JavaScript tutorial";
let arr = new Array();
for( let character of dev){
  arr.push(character);
}
console.log(arr);

Output:

["J", "a", "v", "a", "S", "c", "r", "i", "p", "t", " ", "t", "u", "t", "o", "r", "i", "a", "l"]

Example: using break statement in for of loop

const string = "This is a simple example";
const arr = [];
for (const c of string){
  if (c=="e"){
    break;
  }
  arr.push(c);
}
console.log(arr);

Output:

["T", "h", "i", "s", " ", "i", "s", " ", "a", " ", "s", "i", "m", "p", "l"]

Note: please check the break section if you’re not familiar with this statement.

Example: using continue statement in for of loop

const string = "This is a simple example";
 const arr = [];
 for (const c of string){
   if (c=="s"){
     continue;
   }
   arr.push(c);
 }
 console.log(arr);

Output:

["T", "h", "i", " ", "i", " ", "a", " ", "i", "m", "p", "l", "e", " ", "e", "x", "a", "m", "p", "l", "e"]

Note: please check the continue section if you’re not familiar with this statement.