Home » Tutorials » Learn Javascript » JavaScript For Loop

Learn Javascript

 Prev

JavaScript For Loop

The for loop in JavaScript is one of the most popular loops used, that helps in running a piece of code over and over again until the given condition is false. It’s syntax is as follows:

Syntax

for (initialExpression; condition; update) {
    // Block of code to run
    
}
  1. initialExpression: The initialExpression initializes or starts the loop. It is generally used to declare a variable which later is checked in the condition given. The initialExpression runs only once during the start of the loop.
  2. condition: The condition is an expression that is checked on every single iteration (checked every single time). If the condition is true, the block of code inside the for loop runs, otherwise it terminates or ends the loop.
  3. update: In the update section, we provide an expression that is used to update the variable that we provided in the initialExpression.

Note: Also check out our JavaScript 👉 JavaScript Loops lesson on an intro to loops.

Example 1

// "i=0" is the initialExpression
// "i < 3" is the condition that is checked during each iteration
// "i++" is the update expression, that increases the value of i by 1 after each iteration
for (let i = 0; i < 3; i++) {
  console.log(`Current value of i is ${i}.`);
}

Output

Current value of i is 0.
Current value of i is 1.
Current value of i is 2.

How for loop works in JavaScript? 🤔

  1. Iteration 1: The initial expression i=0 initializes or starts the loop. Then, the condition i < 3 is checked. As the value of i which is “0” is less than 3, the condition returns true. Therefore, the code block given inside the for loop runs. After the code block runs, the update expression executes, increasing the value of i by 1.
  2. Iteration 2: The current value of i is “1“. The condition i < 3 is checked. As the value of i which is “1” is less than 3, the condition returns true. Therefore, the code block given inside the for loop runs. After the code block runs, the update expression executes, again increasing the value of i by 1.
  3. Iteration 3: The current value of i is “2“. The condition i < 3 is checked. As the value of i which is “2” is less than 3, the condition returns true. Therefore, the code block given inside the for loop runs. After the code block runs, the update expression executes, again increasing the value of i by 1.
  4. Iteration 4: The current value of i is “3“. The condition i < 3 is checked. As the value of i which is “3” is not less than 3, the condition returns false. As, the condition returned false, the loop is now terminated.

Example 2

console.log("The multiple of 5 is given below:");

const limit = 10;
for (let n = 1; n <= limit; n++) {
  console.log(`5 X ${n} = ${5 * n}`);
}

Output

The multiple of 5 is given below:
5 X 1 = 5
5 X 2 = 10
5 X 3 = 15
5 X 4 = 20
5 X 5 = 25
5 X 6 = 30
5 X 7 = 35
5 X 8 = 40
5 X 9 = 45
5 X 10 = 50

Note: In this way, repetitive tasks like these can be automated using loops in JavaScript 🤯

In the next lesson, we will learn about the while loop, which has a much simpler syntax than that of the for loop, and has it’s own strengths and weaknesses.

Next