JavaScript Tutorial

The language for programming web pages.

Chapter Quiz Exercises

JS Loops

JavaScript Loops

Loops execute a block of code multiple times. JavaScript supports several loop types.

Loop Types:

for — Known number of iterations
while — While condition is true
do...while — Runs at least once
for...of — Iterate over arrays/strings
for...in — Iterate over object keys
forEach() — Array method loop

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<body style="font-family:Arial;padding:20px;">
<h2>JS Loops Demo</h2>
<div id="out" style="background:#1e1e1e;color:#abb2bf;padding:15px;border-radius:8px;font-family:monospace;line-height:2;"></div>
<button onclick="runLoops()" style="margin-top:10px;padding:10px 20px;background:#f7df1e;color:#1a1a2e;border:none;border-radius:5px;cursor:pointer;font-weight:bold;">▶ Run</button>
<script>
function runLoops() {
  // for loop
  let forResult = [];
  for (let i = 1; i <= 5; i++) forResult.push(i);

// while loop
  let whileResult = [], w = 10;
  while (w >= 6) { whileResult.push(w); w--; }

// for...of
  const fruits = ["Apple","Banana","Cherry"];
  let forOfResult = [];
  for (const f of fruits) forOfResult.push(f);

// for...in
  const obj = {name:"Ali", age:22};
  let forInResult = [];
  for (const key in obj) forInResult.push(key+":"+obj[key]);

document.getElementById("out").innerHTML =
    "for (1-5):      ["+forResult+"]<br>"+
    "while (10→6):   ["+whileResult+"]<br>"+
    "for...of:       ["+forOfResult+"]<br>"+
    "for...in:       ["+forInResult+"]<br>"+
    "forEach:        "+fruits.map((f,i)=>i+"-"+f).join(", ");
}
</script>
</body></html>

Result

Topics