Loading...

JavaScript For Loop

Branching (if / switch) answers “which path?” Once. Real pages often need the same work many times: print five lines, add numbers, build a short list. Copy-pasting the same statement five times is brittle. A for loop keeps one copy of the work and walks a counter through the rounds.

What does for do?

for runs a block again and again while its condition stays true. In the parentheses you set three pieces separated by semicolons: start the counter, check whether another round is allowed, then update the counter after each round. When the condition becomes false, the loop stops and the next statement after the loop runs.

The three parts at a glance

📊 Everyday for pieces

Part Everyday reading Typical use
init start the counter here… let i = 0
condition keep going while this is true… i < 5
update after each round, change the counter… i++

Most beginner loops count with a small integer named i. That name is tradition, not a rule — you can use n or step. Keep the three parts honest: if you never update the counter, the condition may never become false.

Simple for count

javascript 
for (let i = 0; i < 5; i++) {
console.log(i);
}

Count from start to stop

This loop starts at 0. While i is less than 5, it prints i, then adds one. You see 0, 1, 2, 3, 4 in the Console — five rounds, not six. The value 5 never prints because the condition fails first.

Read one full round slowly: check condition → run the body → run the update → check again. The update is not part of the body; it sits in the header so every round advances the same way.

Log a clear step

javascript 
for (let i = 1; i <= 3; i++) {
console.log("step " + i);
}

Same idea, clearer labels

Here the counter starts at 1 and uses i <= 3, so you see step 1, step 2, step 3. Whether you start at 0 or 1 is a design choice — just keep the condition matched to that choice.

Sum with for

javascript 
let total = 0;
for (let i = 1; i <= 4; i++) {
total = total + i;
}
console.log(total);

Accumulate a total

total starts at 0. Each round adds the current i. After 1+2+3+4, total is 10. Loops shine when the result grows across rounds instead of being a single branch.

Step by two

javascript 
for (let i = 0; i < 8; i += 2) {
console.log(i);
}

Change the step

i += 2 jumps by two each round. You see 0, 2, 4, 6. The update slot is not limited to i++ — any honest change that moves toward ending the loop is fine.

Glue a short string

javascript 
let line = "";
for (let i = 1; i <= 3; i++) {
line = line + "n" + i + " ";
}
console.log(line);

Glue pieces as you loop

line starts empty. Each round appends a small piece. After three rounds you get something like n1 n2 n3 (with a trailing space). Same pattern later when you build page text from several parts.

Show loop results on the page

Run a short count, store a message, then write it into the page.

Page count with for

html 
<!DOCTYPE html>
<html>
<head>
<title>For — page count</title>
</head>
<body>
<p id="out">…</p>
<script>
let msg = "";
for (let i = 1; i <= 4; i++) {
msg = msg + i + " ";
}
let box = document.getElementById("out");
box.textContent = "count=" + msg.trim();
</script>
</body>
</html>

The page shows count=1 2 3 4. Change the upper bound, refresh, and read the new list. The next lesson (while) also repeats work, but checks the condition in a different shape — for stays the clean tool when you already know the counter plan up front.

Try it yourself

  1. Write a for that logs 0…4 with i < 5.
  2. Change it to log 1…5 with i <= 5.
  3. Sum 1…5 into total and log the result.
  4. Print even numbers under 10 with i += 2.
  5. Build a string of three labels (a, b, c) inside a loop.
  6. In the HTML demo, change only the upper bound, refresh, and read count=.

Common mistakes

  • Off-by-one: i < 5 vs i <= 5 when you meant the other count
  • Forgetting the update (i++) so the condition never ends
  • Writing work that should be one if as a pointless one-round loop
  • Changing a different variable than the one in the condition
  • Assuming i still exists usefully after the loop when it was declared with let inside the header (block scope)

Summary

  • for repeats a block while the condition stays true
  • Header parts: init, condition, update
  • Great for counting, summing, and building short strings
  • The update can be i++, i += 2, or another clear step
  • Show the result on a page when the loop builds a message
  • Next: while loop — repeat while a condition holds, without the three-part header

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 23 of 23
Javascript Tutorial