Introduction to Loops in JavaScript: A Beginner's Guide

❌

Introduction to Loops

Consider a scenario where you want to accept and display ten numbers for the user. Instead of writing the same lines of code again and again 10 times, you can use loops.

Loops allow you to execute a single statement or a block of statements multiple times. They are widely used when displaying a series of numbers and accepting repetitive input. A loop construct consists of a condition instructing the compiler the number of times a specific block of code will be executed.

JavaScript supports three types of loops which are as follows:

• while Loop
• for Loop
• do-while Loop

The loop continues infinitely if the condition is not specified within the construct. Such loop constructs are referred to as infinite loops.

1. while Loop:

The while loop executes a block of code as long as the given condition remains true.

The while loop begins with the while keyword, which is followed by parentheses containing a boolean condition. If this condition returns true, the block of statements within the while loop is executed. After each iteration, program control is transferred back to the while statement, where the condition is again checked for another round of execution. This process continues until the specified condition becomes false. Once the condition becomes false, the while statement stops the execution of the loop and transfers control to the next statement appearing after the block.

The syntax for the while loop is as follows:

while(condition)

{

// statements;

}

where,

Condition: is a boolean expression.

Use the while loop.

let count = 1;

while (count <= 5) {

  console.log("Count is: " + count);

  count++;

}

2. for Loop:

The for loop is similar to the while loop in functionality. It executes the statements within the loop as long as the given condition is true. Unlike the while loop, the for loop specifies the loop control statements at the top instead of in the body of the loop.

The for loop begins with the for keyword, which is followed by parentheses containing three expressions, each of which is separated by a semicolon. The three expressions are referred to as initialization expression, condition expression, and increment/decrement expression respectively. These three expressions are optional.

The syntax for the for loop is as follows:

for (initialization; condition; increment/decrement)

{

// statements;

}

where,

• Initialization: Initializes the variables that will be used in the condition.
• Condition: Comprises the condition that is checked before the statements in the loop are executed.

Increment/decrement: Comprises the statement that changes the value of the variable(s) on each successful execution of the loop to ensure that the condition specified in the condition section is reached. The increment and decrement operators, such as ++, --, and shortcut operators: += or -= are used in this section.


Using a for loop.

for (let i = 1; i <= 5; i++) {

  console.log("Iteration number: " + i);

}

3. do-while Loop:

The do-while loop is similar to the while loop. This is because both the do-while and while loops execute until the condition becomes false. However, the do-while loop differs by executing the body of the loop at least once before evaluating the condition. Thus, even if the condition is false, the do-while loop executes at least once.

The do-while loop starts with the do keyword and is followed by a block of statements. At the end of the block, the while keyword is specified which is followed by parentheses containing the condition. When the specified condition returns false, the block of statements after the do keyword is ignored and the next statement following the while statement is executed.

The syntax for the do-while loop is as follows:

do

{

// statements;

} while(condition);

where,

• Condition: This is a Boolean expression.

Using a do-while loop.