Loops Statements in JavaScript: A Beginner's Guide

Loops are an essential part of any programming language, and JavaScript is no exception. Loops allow us to repeat a set of instructions multiple times, making our code more efficient and easier to maintain. In this article, we will explore the different types of loops available in JavaScript, how to use them, and some common use cases.

Table of Contents 📖

• The for Loop
• The while Loop
• The do-while Loop
• Loop Control Statements
• Conclusion

for loop..

while loop..

do-while loop.. Each of these loops has its own syntax and use cases, but they all serve the same purpose of repeating a block of code.

The for Loop 🔁

The for loop is the most common type of loop in JavaScript. It is used when we know the exact number of times we need to execute a block of code. The syntax of a for loop is as follows:

for (initialization; condition; increment / decrement) {
  // code to be executed
}

The initialization step is used to initialize a counter variable that will keep track of the number of times the loop has executed.

The condition step is used to specify the condition that must be true for the loop to continue executing. The increment/decrement step is used to update the counter variable after each iteration of the loop. Here is an example of a for loop that prints the numbers 1 to 10:

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

In this example, we initialize a variable i to 1, set the condition to execute the loop while i is less than or equal to 10, and increment i by 1 after each iteration. The loop will execute 10 times, printing the numbers 1 to 10 to the console.

The while Loop 🔁

The while loop is used when we do not know the exact number of times we need to execute a block of code. The syntax of a while loop is as follows:

while (condition) {
  // code to be executed
}

The condition step is used to specify the condition that must be true for the loop to continue executing. Here is an example of a while loop that prints the numbers 1 to 10:

let i = 1;

while (i <= 10) {
  console.log(i);
  i++;
}

In this example, we initialize a variable i to 1, set the condition to execute the loop while i is less than or equal to 10, and increment i by 1 after each iteration. The loop will execute 10 times, printing the numbers 1 to 10 to the console.

The do-while Loop 🔁

The do-while loop is similar to the while loop, but it executes the block of code at least once, even if the condition is false. The syntax of a do-while loop is as follows:

do {
  // code to be executed
} while (condition);

The condition step is used to specify the condition that must be true for the loop to continue executing. Here is an example of a do-while loop that prints the numbers

let i = 1;

do {
  console.log(i);
  i++;
} while (i <= 10);

In this example, we initialize a variable i to 1, print the value of i to the console, and then increment i by 1. The loop will execute at least once because the condition is checked after the first iteration. If the condition is true, the loop will continue executing until i is greater than 10.

Loop Control Statements 🛑

Loop control statements are used to control the execution of a loop. There are three loop control statements in JavaScript:

• break statement
• continue statement
• return statement

The break Statement

The break statement is used to terminate a loop early. When the break statement is executed inside a loop, the loop is immediately terminated, and the program continues executing from the next statement after the loop. Here is an example of a for loop that terminates early using the break statement:

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

In this example, the loop will terminate early when i is equal to 5. The program will continue executing from the next statement after the loop.

The continue Statement

The continue statement is used to skip an iteration of a loop. When the continue statement is executed inside a loop, the current iteration is immediately terminated, and the loop proceeds to the next iteration. Here is an example of a for loop that skips an iteration using the continue statement:

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}

In this example, the loop will skip the iteration when i is equal to 5. The program will continue executing from the next iteration.

The return Statement

The return statement is used to exit a function. When the return statement is executed inside a loop that is inside a function, the function is immediately terminated, and the program continues executing from the next statement after the function. Here is an example of a function that uses a return statement inside a for loop:

function findIndex(array, value) {
  for (let i = 0; i < array.length; i++) {
    if (array[i] === value) {
      return i;
    }
  }
  return -1;
}

const array = [1, 2, 3, 4, 5];
const value = 3;

console.log(findIndex(array, value)); // Output: 2

In this example, the function findIndex iterates over an array and returns the index of the first occurrence of the specified value. If the value is not found in the array, the function returns -1.

Conclusion 📝

Loops are a fundamental part of JavaScript and allow us to execute a block of code multiple times. There are three types of loops available in JavaScript: the for loop, the while loop, and the do-while loop. Each of these loops has its own syntax and use cases. We also learned about loop control statements, which are used to control the execution of a loop.

By understanding loops and how to use them effectively, we can write more efficient and maintainable code.