Topic 2418 min readStructured Tutorial

JavaScript for Loop - Control Flow Tutorial

Quick Answer

The JavaScript for loop is a control flow statement used to execute a block of code repeatedly for a specified number of iterations. It consists of initialization, condition, and increment expressions, making it ideal for iterating over arrays or running code multiple times efficiently.

Learning Objectives

Explain the purpose of for Loop in a practical learning context.
Identify the main ideas, terms, and decisions involved in for Loop.
Apply for Loop in a simple real-world scenario or practice task.

Introduction to JavaScript for Loop

Control flow statements allow you to dictate the order in which your code executes.

The for loop is one of the most commonly used loops in JavaScript, perfect for running code repeatedly with a known number of iterations.

Loops are the backbone of repetitive tasks in programming.

Understanding the for Loop Syntax

The for loop has three main parts: initialization, condition, and increment/decrement.

These parts control how many times the loop runs and when it stops.

Initialization: sets the starting point, usually a counter variable.
Condition: evaluated before each iteration; if true, the loop continues.
Increment/Decrement: updates the counter after each iteration.

Basic for Loop Structure

Here is the general syntax of a for loop in JavaScript:

for Loop Syntax
Part	Description	Example
Initialization	Sets the loop counter	let i = 0
Condition	Loop runs while true	i < 5
Increment	Updates counter each iteration	i++

Using for Loop with Examples

Let's see how a for loop works with a practical example.

This example prints numbers from 0 to 4 in the console.

Example: Counting from 0 to 4

The loop starts at 0 and runs while the counter is less than 5.

Advanced for Loop Usage

You can use for loops to iterate over arrays or perform complex iterations.

Nested for loops allow you to handle multi-dimensional data.

Iterate over arrays using the loop counter as an index.
Use nested loops for multi-level data structures like matrices.

Example: Looping Through an Array

Use the for loop to access each element by its index.

Practical Example

This loop prints numbers 0 through 4 to the console.

This loop prints each fruit in the array.

Examples

Basic for Loop Example

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

This loop prints numbers 0 through 4 to the console.

Iterate Over an Array

const fruits = ['apple', 'banana', 'cherry'];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

This loop prints each fruit in the array.

Best Practices

Always declare the loop variable with let to limit its scope.
Use meaningful variable names for readability.
Avoid modifying the loop counter inside the loop body.
Use array length property to avoid hardcoding iteration limits.

Common Mistakes

Forgetting to update the loop counter, causing infinite loops.
Using var instead of let, leading to unexpected scope issues.
Off-by-one errors in loop conditions.
Modifying the loop counter inside the loop body.

Hands-on Exercise

Print Even Numbers

Write a for loop that prints even numbers from 2 to 20.

Expected output: 2 4 6 8 10 12 14 16 18 20

Hint: Use the modulo operator to check for even numbers.

Sum Array Elements

Use a for loop to calculate the sum of all numbers in an array.

Expected output: Sum of array elements

Hint: Initialize a sum variable outside the loop and add each element inside the loop.

Interview Questions

What are the three parts of a for loop in JavaScript?

Interview

Initialization, condition, and increment/decrement.

How can you prevent infinite loops when using for loops?

Interview

Ensure the loop condition will eventually become false by correctly updating the loop counter.

What is for Loop, and why is it useful?

Beginner

The JavaScript for loop is a control flow statement used to execute a block of code repeatedly for a specified number of iterations.