<< PREVIOUS
NEXT >>

JavaScript 'for' Loop

About JavaScript 'for' Loop

In JavaScript, a 'for' loop is a control structure which is used to execute a block of code repeatedly for a specific number of times.

It is a powerful tool for iterating over arrays, strings, or any other data structure that can be indexed.

It is particularly used when the number of iterations is known beforehand.

For Loop Syntax

The 'for' loop has three control expressions: initialization, condition, and update expressions as demonstrated in the following syntax:

Basic Syntax of For Loop

Explanation of Integral Parts of 'for' Loop

  • for (initialization; condition; update): The 'for' keyword is used to define a for loop with three expressions: initialization, condition, and update.
  • initialization: This expression is executed only once at the start of the loop. In this part, a variable is declared and initialized with a value to use it as the loop counter (e.g., let i = 0).
  • condition: In this expression, a condition is declared and the condition is evaluated before each iteration. If the condition is true, the code inside the loop is executed. If it is false, the loop terminates.
  • update: This expression is executed after each iteration. It is used to update/modify the loop counter variable by incrementing or decrementing the value of the variable.
  • Code Block: It is the block of code to be executed at each iteration.

Creating a 'for' Loop

The following example of 'for' loop iterates 5 times and prints number from 1 to 5 in the console.
Example of Creating 'for' Loop
Output of the example
1
2
3
4
5
Explanation of the code
  • for(let i = 1; i <= 5; i++): Here the 'for' keyword is used to define a 'for' loop with three expressions: let i = 1; (initialization), i <= 5; (condition), and i++ (update).
  • let i = 1;: In this expression, a variable named i is declared and initialized with value 1 to use it as the loop counter. It will be evaluated once only.
  • i <= 5;: In this expression, a condition is declared that i is smaller or equal to 5. The condition is evaluated before each iteration. If the condition is true, the code inside the loop is executed. If it is false, the loop terminates.
  • i++: This expression is used to increment the value of i variable by 1. It is executed after each iteration.
  • console.log(i);: This is the block of code of the loop. This line prints the value of i at each iteration.

'for' Loop With an Array

Array elements can be iterated using 'for' loop. It is necessary to get the number of elements of the array to use it in the condition expression of loop. Here length property is used to get the number of elements in the array.
Example of Iterating an Array Using 'for' Loop
Output of the example
Apple
Banana
Cherry
Orange

'for...in' Loop With an Object

You can use 'for...in' loop to iterate over the properties (keys) of an object.
Example of Iterating an Object Using 'for...in' Loop
Output of the example
name: Alice
age: 19
city: London

'for...of' Loop With Arrays and Strings

You can use 'for...of' loop to iterate over iterable objects like arrays, strings, etc.
Example of Iterating a String Using 'for...of' Loop
Output of the example
H
e
l
l
o
Example of Iterating an Array Using 'for...of' Loop
Output of the example
Apple
Banana
Cherry
Orange

Nested 'for' Loop

A 'for' loop inside another 'for' loop is known as nested for loop. It is used to handle multi-dimensional data.
Example of Nested 'for' Loop
Output of the example
i: 0, j: 0
i: 0, j: 1
i: 0, j: 2
i: 1, j: 0
i: 1, j: 1
i: 1, j: 2
i: 2, j: 0
i: 2, j: 1
i: 2, j: 2

'for' Loop With Multi-dimensional Array

A 'for' loop can be used to iterate over the elements of multi-dimensional array.
Example of 'for' Loop With Multi-dimensional Array
Output of the example
1
2
3
4
5
6
7
8
9

Breaking Out of 'for' Loop

The break statement terminates the 'for' loop, even though the condition of the loop is still true.
Example of Breaking Out of 'for' Loop
Output of the example
0
1
2

Skipping Iterations of 'for' Loop

The continue statement skips the current iteration and proceeds to the next one.
Example of Skipping Iterations of 'for' Loop
Output of the example
0
1
2
4

JavaScript Compiler For Live Practice

Practice the above JavaScript code in the following JavaScript editor. Create more JavaScript functions in the following editor and click Execute button to check the output. The output will be displayed in JavaScript Code Output section.

JavaScript logo JavaScript Compiler
JavaScript Code Output