Loops in JavaScript

Moving ahead, in this module, we'll be discussing about the loops in JavaScript. Loops in any programming language are used to execute repeated block of codes(which is called as iteration). It is implemented to repeat a certain set of instructions unless the condition is satisfied.

Loops can iterate over a range of values, arrays, or objects and execute a block of code for each iteration. The basic idea is to automate repetitive tasks. JavaScript supports all loops in programming. If you want to print a statement multiple times, loops can be implemented there.

It consists of two primary components: the loop body and the loop control variable. The loop body is the block of code that gets executed repeatedly and the loop control variable is used to track the number of iterations. The loop control variable is updated each time the loop body is executed.

The best real-life example of loops are ATM machine where the machine processes transactions again and again until the customer asks it to stop. Let's read more about it by understanding its types, functions and examples.

There are six types of loops most commonly used in JavaScript -

  1. for Loop
  2. while Loop
  3. do-while Loop
  4. for…in Loop
  5. for…of Loop
  6. forEach Loop

Also, apart from these commonly used loops in JavaScript, we also have another types of loop which are based on functioning:

  • Entry-controlled loop (where condition is tested before executing the statement). For and while are entry-controlled loop.
  • Exit-controlled loop (where statement is executed at the initial stage then checks the condition). Do-while loop is exit-controlled loop.

Applications of Loops in JavaScript:

Loops are the basic concept in JavaScript programming and are used to perform repetitive tasks, iterate over collections, and process data. Let's discuss some of the most common applications of loops in JavaScript:

  1. Mathematical calculations : Loops are used to perform mathematical calculations in web applications. Loops can be used to calculate even/odd numbers in an array.

    For example: Code snippet to find even or odd numbers using loops in JavaScript.

let numbers = [2, 5, 10, 15, 20, 25];
   // Loop through each number in the array
   for (let i = 0; i < numbers.length; i++) {
   // Check if the current number is even or odd
       if (numbers[i] % 2 === 0) {
           console.log(numbers[i] + ' is even.');
       } else {
           console.log(numbers[i] + ' is odd.');
       }
    }
Output:

2 is even.

5 is odd.

10 is even.

15 is odd.

20 is even.

25 is odd.

  1. Sorting data : Loops are used to sort data in web applications. To arrange numbers in ascending or descending order, loops can be used.

    For example: This code snippet explains about the sorting of data using for loop in JavaScript.

let numbers = [5, 3, 8, 1, 4, 2];
   // Bubble sort algorithm using a loop
   for (let i = 0; i < numbers.length; i++) {
       for (let j = 0; j < numbers.length - i - 1; j++) {
           if (numbers[j] > numbers[j + 1]) {
               let temp = numbers[j];
               numbers[j] = numbers[j + 1];
               numbers[j + 1] = temp;
           }
       }
   }
   console.log(numbers); // Output: [1, 2, 3, 4, 5, 8]
  1. Input validation : To validate user input in web applications, loops can be used. To check whether an input entered is correct or not, loops can be applied.

  2. Creating patterns: To create patterns used in web applications, to create a table of data, or a sequence of elements, loops can be used.

    For example: Code snippet to create a pattern using numbers.

let n = 5;
   // Loop through each row
   for (let i = 1; i <= n; i++) {
       let pattern = '';
       // Loop through each column in the current row
       for (let j = 1; j <= i; j++) {
           pattern += j + ' '; // Append the current column number and a space to the pattern string
       }
       console.log(pattern);
   }
Output:

1

12

123

1234

12345

  1. Animations : To create animations in web applications, loops can be used. To update the position of an elements on a web page at regular intervals, creating the illusion of movement.

Conclusion

In the summary, we have talked about the loops in JavaScript and there wide range of applications, from iterating over collections to create animations and validating user input. Looping structures in JavaScript have been thoroughly discussed in this article. You learn how to use loop effectively and come up with the efficient JavaScript code.


Learn via Video Course

Javascript(English) Logo

Javascript(English)

72966

3 hrs