4.3 For Loops

To repeat an action several times, copy-pasting the same console.log five times is not the right approach. JavaScript offers several kinds of loops for this: for, while, do...while, for...in, and for...of. They all repeat code but differ slightly in how they start, end, and iterate. Let's begin with the most common one: the for loop.

Anatomy of a for loop

A for loop has three parts inside its parentheses, separated by semicolons:

  • Initial expression — declares and initializes a loop variable, usually let i = 0 (i stands for index).
  • Condition — checked before each iteration. The loop keeps running as long as it returns true.
  • Increment expression — runs at the end of each iteration; typically i++.
for (let i = 0; i < 5; i++) {
  console.log('Hello everyone');
}

This prints the message five times. In the first iteration i is 0; after each iteration i is incremented by 1. When i reaches 5, the condition becomes false and the loop ends. You can also start at 1 and stop at 5 with i = 1; i <= 5, or loop in reverse with i = 5; i >= 1; i--.

To print only odd numbers between 1 and 5, combine a loop with an if based on the remainder of the division by 2:

for (let i = 1; i <= 5; i++) {
  if (i % 2 !== 0) console.log(i); // 1, 3, 5
}

That's it for the for loop. In the next video, we'll see how the while loop solves the same problem with a slightly different syntax.

Summary

This lesson covers the fundamentals of for loops in JavaScript, explaining how they automate repetitive tasks instead of duplicating code. A for loop consists of three main components: the initial expression (declaring and initializing a variable), the condition (determining when the loop stops), and the increment expression (updating the variable after each iteration). The lesson demonstrates practical examples including printing values to the console, filtering odd numbers, and iterating both forward and backward through a range.

Key points

  • A for loop automates repetitive actions by combining initialization, condition checking, and incrementation into a single statement
  • The standard for loop syntax uses three parts separated by semicolons: for (i = 0; i < 5; i++) where i is the counter variable
  • The loop counter is initialized once, tested against the condition before each iteration, and incremented after each iteration executes
  • For loops can be combined with conditional logic (like if statements) to filter or transform data during iteration
  • The same loop can be written in forward order (0 to 5) or reverse order (5 to 0) by adjusting the initialization, condition, and increment
  • Other loop types like while, do-while, for...in, and for...of accomplish similar repetitive tasks with subtle differences in how they initialize and terminate

FAQ

What are the three parts of a JavaScript for loop?

The three parts are: (1) initial expression—declaring and initializing the counter variable (e.g., i = 0); (2) condition—determining when the loop continues (e.g., i < 5); and (3) increment expression—updating the counter after each iteration (e.g., i++). Each part is separated by a semicolon.

When does a for loop stop executing?

A for loop stops when the condition evaluates to false. For example, in for (i = 0; i < 5; i++), the loop stops once i reaches 5 because the condition i < 5 becomes false, and no further iterations occur.

Can you use conditional logic inside a for loop to filter data?

Yes, you can use if statements inside the loop body to check conditions on each iteration. For example, you can print only odd numbers by checking if (i % 2 !== 0) inside the loop and then logging only those values.