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 −

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result,.sample {
      font-size: 20px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>for..of loop JavaScript</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to iterate over the above string using for..of loop
</h3>
<script>
   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>";
      }
   });
</script>
</body>
</html>

Output

The above code will produce the following output −

On clicking the ‘CLICK HERE’ button −

raja
Published on 16-Jul-2020 08:03:18
Advertisements