JavaScript For Loop

What You'll Learn

You’ll learn how to use the for loop in JavaScript to iterate over arrays, strings, and perform tasks repeatedly using standard loop syntax.

Understanding the for Loop

Basic syntax of a for loop in JavaScript:

for (let i = 0; i < 5; i++) {
    // Code to execute
}

for (let i = 0; i < 5; i++) {
    // Code to execute
}

• Initialization (i = 0): Set the loop variable.
• Condition (i < 5): Loop runs as long as the condition is true.
• Increment (i++): Update the loop variable after each iteration.

Example 1: Iterating Over an Array

Before we look at the example, let's cover two quick things:

What is an Array?

An array in JavaScript is a way to store multiple values in a single variable. Arrays can hold different types of data — like numbers, strings, or even other arrays.
You create an array using square brackets [ ], with items separated by commas. For example:

const myArray = [1, 2, 3, 4, 5];

const myArray = [1, 2, 3, 4, 5];

This creates an array called myArray that contains five numbers.

We’ll use this array in the next example to demonstrate the for loop.

Now, let’s see how to loop through an array using a for loop:

const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

How It Works:

• The for loop starts with i = 0, which is the first index of the array.
• It runs while i < numbers.length, meaning it loops through every item in the array.
• numbers[i] accesses each item, and console.log prints it to the console.

Output

1
2
3
4
5

1
2
3
4
5

Example 2: Nested Loops with Two Arrays

Sometimes you need to go through every combination of items from two different arrays. You can do this using a nested for loop—one loop inside another.

Here's an example using two arrays of numbers:

const numbers1 = [1, 2, 3];
const numbers2 = [1, 2, 3];

for (let i = 0; i < numbers1.length; i++) {
    for (let j = 0; j < numbers2.length; j++) {
        console.log(`(${numbers1[i]}, ${numbers2[j]})`);
    }
}

const numbers1 = [1, 2, 3];
const numbers2 = [1, 2, 3];

for (let i = 0; i < numbers1.length; i++) {
    for (let j = 0; j < numbers2.length; j++) {
        console.log(`(${numbers1[i]}, ${numbers2[j]})`);
    }
}

How It Works:

• The outer for loop goes through each number in numbers1.
• For every item in numbers1, the inner loop goes through all items in numbers2.
• The console.log prints out each possible pair of numbers.

Output

(1, 1)
(1, 2)
(1, 3)
(2, 1)
(2, 2)
(2, 3)
(3, 1)
(3, 2)
(3, 3)

(1, 1)
(1, 2)
(1, 3)
(2, 1)
(2, 2)
(2, 3)
(3, 1)
(3, 2)
(3, 3)

Example 3: Iterating Over a String

You can also use a for loop to go through each character in a string. This is useful when you want to process or display each letter one by one.

Here's an example that loops through the word "JavaScript":

const word = "JavaScript";
for (let i = 0; i < word.length; i++) {
    console.log(word[i]);
}

const word = "JavaScript";
for (let i = 0; i < word.length; i++) {
    console.log(word[i]);
}

How It Works:

• The for loop starts at index 0 and goes up to the last character in the string.
• word[i] gets the character at each position.
• console.log prints each character on a new line.

Output

J
a
v
a
S
c
r
i
p
t

J
a
v
a
S
c
r
i
p
t

Exercises

Try these exercises to solidify your understanding of JavaScript for loops:

const numbers = [10, 20, 30, 40, 50];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

const numbers = [10, 20, 30, 40, 50];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

const str = "Hello World";
for (let i = 0; i < str.length; i++) {
    console.log(str[i]);
}

const str = "Hello World";
for (let i = 0; i < str.length; i++) {
    console.log(str[i]);
}

*Tip: Try changing the array or string to test your knowledge!

What's Next?

Next, you'll explore the break statement in JavaScript, which is used to exit loops or switch statements early. You'll learn how it helps control the flow of your program by stopping a loop when a specific condition is met, improving efficiency and readability in your code.