For Loop

The syntax of the for loop is as below.

It starts with for keyword followed by three optional expressions inside parentheses separated by semi-colons. Finally, a block of statements inside curly braces follows them. These block statements execute for each iteration of the loop.

                            
for ([initial-expression]; [condition]; [final-expression])
{ statements }
   
  
                        
                            
                        

The three optional expressions are

1. Initial-expression
2. Condition
3. Final-expression

Initial Expression

The initial-expression is the expression, that JavaScript executes at the beginning of the loop. It runs only once.

1. Initial-expression is optional
2. You can execute any expression here including complex expressions.
3. The main purpose of it to initialize the loop counters using assignment expressions
4. You can also declare variables here using var & let.
5. Variables declared with let are local to the statement.
6. Variables declared with var are not local to the loop, You can access them outside the loop also
7. The result of this expression is discarded.

Condition

The condition is evaluated before the beginning of each iteration of the loop. If the condition returns true, then it executes the block of statements. If returns false the loop terminates.

condition is optional. An empty condition returns true.

Final Expression

For Loop executes the final expression at the end of each iteration of the loop and before the next evaluation of the condition

The main purpose of it is to increment or update the loop counter.

Statements

A statement that is executed as long as the condition evaluates to true.

Use the block { ... } to group the multiple statements together. For a single statement, no need to use { ... }

You can also use an empty statement just by adding ;

How it works

When a For loop executes, the following occurs

1. Executes the initial-expression. This runs only once
2. Evaluates the condition. If the value is True then continue to step 3. If false the loop terminates.
3. Executes the statements.
4. Executes the final-expression.
5. Control returns to Step 2.

For Loop Example

                            
for (let i = 0; i < 5; i++) {
  console.log(i);
}
console.log("End of Loop");
 
 
*** Console ***
0
1
2
3
4
End of Loop
 
 
                            
                        
                            
                        

1. The expression let i = 0 is the initial-expression and runs only once. It initializes the loop local variable i with a value of 0
2. i < 5 is the condition, which returns true as long as the i is less than 5. Hence the loop continues. If it returns false, the loop terminates.
3. The loop runs for the first time and statements inside the { } executes.
4. he final-expression i++ executes. Which increments the value of i by 1
5. Now, the control returns to step 2

let is local to the for loop

In the example above we used the let to declare the loop variable i. Hence its scope is local to the loop body. Trying to use outside the loop will result in the error Error: i is not defined.

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

var is available outside the for loop.

We can also use var to declare the variable, in that case, you can use the variable outside the For loop.

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

Initial expression is optional

We can also initialize the initial value outside the for loop and keep the initial-expression empty

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

Condition is also optional

The condition is also optional, But an empty condition is treated as True. Hence this will create an infinite loop

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

Use Break statement to break out of the loop

You can use the break statement to break out of a For loop.

        
let i = 0;
for (; ; i++) {
  if (i >= 5) break;
  console.log(i);
}
  
    
        
    

Final Expression is also optional

In the following example Initial Expression, condition & final expression is empty.

We initialize the value of the counter before entering the loop. Check the condition in the loop body. Also, execute the Final expression as the last statement of the loop.

        
let i = 0;
for (;;) {
  if (i >= 5) break;
  console.log(i);
  i++;
}
  
    
        
    

The above is equivalent to the following code.

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

Skipping an Iteration

Use the continue statement to skip the rest of the for loop and move over to the next iteration. The following example, will not print the 0 & 1.

        
let i = 0;
for (let i = 0; i < 5; i++) {
  if (i < 2) continue;
  console.log(i);
}
 
** Output **
 
2
3
4
  
    
        
    

Loop Backwards

You can also go backward. Start the count from 5 and decrement in each iteration.

let i = 0;
for (let i = 5; i > 0; i--) {
  console.log(i);
}
 
*** Console **
5
4
3
2
1

Complex Expressions

We can also include complex expressions in Initial & final expressions

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

Statement body is also optional

In the following code, we do not have for the body.

 
let sum = 0;
 
for (let i = 0; i <= 5; sum = sum + i, i++);
 
console.log(sum);

For Loop More Examples

        
let persons = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
for (let i=0; i < persons.length;i++)
{
  console.log(persons[i]);
}
 
  
    
        
    

Reference

For

Read More

1. JavaScript Tutorial
2. If, else if & nested if statements
3. Switch Statement
4. While & Do While Loops
5. For Loop in JavaScript
6. Break Statement
7. Continue Statement