Looping Through an Array in JavaScript

Javascript Front End Technology Web Development

Array is a linear data structure, which is able to store elements of different datatypes. Arrays are also defined as ordered collections. In array each of the value will be referred to as an element and those can be identified with index numbers.

const array_name = [item1, item2, ...];
const movies = [Bahubali, RRR, KGF, Pushpa];
//Index values of above elements
Bahubali - [0]
RRR - [1]
KGF - [2]
Pushpa - [3]

Loops is a programming element, there will be a sequence of instructions defined in the loop and it will continue to iterate till the condition in the loop is satisfied. There will be repetitive situations in coding, in those situations we use loops for time saving and to lessen the errors.

Syntax

for (statement 1; statement 2; statement 3) {
   // program block to be executed
}

Statement 1 will be executed only once before the execution of the program block.
Statement 2 will be describing the condition for the program block execution.
Statement 3 will be executing every time after the program block has been executed.

while loop

The while loop can be used in JavaScript array. Loop will check the condition declared inside the parenthesis (); if it satisfies the condition, will return true and if it's not satisfied, will return false and loop will get terminated.

In array if you want the loop to iterate till the last element, we can use the length property

Example

In this example below, we used while loop on an array and length property to reach the end of an array.



<html>
   <head>
      <title>Using While loop in JavaScript array</title>
   </head>
   <body>
      <script>
         const emp_id = [1180, 1181, 1182, 1183, 1184, 1185, 1186];
         let i = 0;
         while (i < emp_id.length) {
            document.write(emp_id[i]);
            document.write("<br>");
            i++;
         }
      </script>
   </body>
</html>

Output

The output of the above script will be ?

do?while loop

This do?while loop is almost similar to the while loop. The do?while loop will execute the body before executing the condition mentioned in the loop, hence executing one time more than the while loop.

Example

In this below program, we performed do?while loop on the array to iterate each and every element.



<!DOCTYPE html>
<html>
   <head>
      <title>Using do...while loop in JavaScript array</title>
   </head>
   <body>
      <script>
         const emp_id = [1180, 1181, 1182, 1183, 1184, 1185, 1186];
         let i = 0;
         do {
            document.write(emp_id[i]);
            document.write("<br>");
            i++;
         }
         while (i < emp_id.length);
      </script>
   </body>
</html>

Output

The output of the above script will be ?

Example

Let's consider this scenario where we are giving the input of index variable i=7 and it will run the loop once before stopping even the index variable is not present in the array and return the output as undefined.



<!DOCTYPE html>
<html>
   <head>
      <title>Using do...while loop in JavaScript array</title>
   </head>
   <body>
      <script>
         const emp_id = [1180, 1181, 1182, 1183, 1184, 1185, 1186];
         let i = 0;
         do {
            document.write(emp_id[i]);
            document.write("<br>");
            i++;
         }
         while (i < emp_id.length);
      </script>
   </body>
</html>

Output

The output of the above script will be ?

for loop

In for loop, initialization, condition, and iteration will all be declared inside the parenthesis of the loop. A value is initialized to implement the statements within the loop iteratively until the condition is not met.

Example

In this example below, we are performing for loop on array. It checks the condition and then starts executing the code inside the loop until the conditions are satisfied.



<html>
   <head>
      <title>Using for loop in JavaScript array</title>
   </head>
   <body>
      <script>
         const emp_id = [100, 200, 300, 400, 500, 600, 700];
         for (let i = 0; i < emp_id.length; i++) {
            document.write(emp_id[i]);
            document.write("<br>");
         }
      </script>
   </body>
</html>

Output

The output of the above script will be ?

for?in loop

The for...in loop is a simpler method for looping through arrays since it provides the key, which we can use to retrieve the data from our array.

Example

In this example below, we have used for?in loop in JavaScript array.



<html>
   <head>
      <title>Using for...in loop in JavaScript array</title>
   </head>
   <body>
      <script>
         const emp_id = [7, 10, 18, 17, 45, 99, 333];
         for (i in emp_id) {
            document.write(emp_id[i]);
            document.write("<br>");
         }
      </script>
   </body>
</html>

Output

The output of the above script will be ?

for?of loop

The for?of loop is one of the easiest way to loop inside an array. It will get the element by itself rather than getting the key. And also it has the similar way of syntax like for?in loop.

Example

In this example, we used for?of loop in JavaScript array. Here we no longer need to use the index to fetch each element of our array because this gets every element of our array.



<html>
   <head>
      <title>Using for...in loop in JavaScript array</title>
   </head>
   <body>
      <script>
         const prime_num = [2, 3, 5, 7, 11, 13, 17, 19];
         for (output of prime_num) {
            document.write(output);
            document.write("<br>");
         }
      </script>
   </body>
</html>

Output

The output of the above script will be ?

Nikhilesh Aleti

Updated on: 2022-11-18T07:32:21+05:30

589 Views

Kickstart Your Career

Get certified by completing the course

Get Started