Explain for. . .of loop JavaScript.

JavascriptWeb DevelopmentObject Oriented Programming

The for..of loop allow us to iterate over iterable objects like array, string, array like objects, nodelist etc.

Following is the code for for..of loop in javaScript −


 Live Demo

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   .result,.sample {
      font-size: 20px;
      font-weight: 500;
<h1>for..of loop JavaScript</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
Click on the above button to iterate over the above string using for..of loop
   let resEle = document.querySelector(".result");
   let sampleEle = document.querySelector(".sample");
   let str = "Hello";
   sampleEle.innerHTML = str;
   document.querySelector(".Btn").addEventListener("click", () => {
      for (i of str) {
         resEle.innerHTML += i + "<br>";


The above code will produce the following output −

On clicking the ‘CLICK HERE’ button −

Updated on 16-Jul-2020 08:04:09