JavaScript Loops
Loops are useful for executing the same code repeatedly with different values. This is especially helpful when working with arrays.
Example without a Loop:
text += cars[0] + "<br>";text += cars[1] + "<br>";text += cars[2] + "<br>";text += cars[3] + "<br>";text += cars[4] + "<br>";text += cars[5] + "<br>";
Example with a Loop:
for (let i = 0; i < cars.length; i++) { text += cars[i] + "<br>";}
Different Kinds of Loops
JavaScript supports various types of loops:
- for: Loops through a block of code a specified number of times.
- for/in: Loops through the properties of an object.
- for/of: Loops through the values of an iterable object.
- while: Loops through a block of code as long as a specified condition is true.
- do/while: Also loops through a block of code as long as a specified condition is true.
The For Loop
The for statement creates a loop with three optional expressions:
for (expression 1; expression 2; expression 3) { // code block to be executed}
- Expression 1: Executes once before the loop starts.
- Expression 2: Defines the condition for running the loop.
- Expression 3: Executes after each iteration of the loop.
Example :
for (let i = 0; i < 3; i++) { text += "The number is " + i + "<br>";}
Explanation:
- Expression 1 initializes the loop variable (let i = 0).
- Expression 2 sets the loop condition (i < 3).
- Expression 3 increments the loop variable (i++).
Expression 1
Usually used to initialize the loop variable.
Example
for (let i = 0, len = cars.length, text = ""; i < len; i++) { text += cars[i] + "<br>";}
You can also omit Expression 1 if the variable is already initialized:
Example
let i = 1;let len = cars.length;let text = "";for (; i < len; i++) { text += cars[i] + "<br>";}
Expression 2
Defines the condition for the loop to run.
Example without Expression 2 (using break)
let i = 0;for (; ;) { if (i >= 3) break; text += "The number is " + i + "<br>"; i++;}
Expression 3
Usually used to increment the loop variable.
Example with Custom Increment
for (let i = 0; i < 10; i += 2) { text += "The number is " + i + "<br>";}
You can also omit Expression 3 and manage the increment inside the loop:
Example
let i = 0;for (; i < cars.length; ) { text += cars[i] + "<br>"; i++;}
Loop Scope
Using var in a loop:
Example
var i = 5;for (var i = 0; i < 10; i++) { // some code}// Here, i is 10Using let in a loop:
Example
let i = 5;for (let i = 0; i < 10; i++) { // some code}// Here, i is still 5
In the first example, var redeclares the variable outside the loop. In the second example, let keeps the variable scope within the loop.
For/Of and For/In Loops
The for/in loop and the for/of loop will be explained in the next chapter.
While Loops
The while loop and the do/while loop will be explained in the upcoming chapters.