Understanding Javascript Array Series V - Array Loops & Iteration Part II

In the previous article, I talked about iterating over arrays using For ..., For ... of & For ... in loops. You can check it out below:

Understanding Javascript Array Series IV - Array Loops & Iteration Part I

Nedy Udombat ・ Oct 2 '19

#javascript #react #html #css

In this article. I will talk about 2 other ways of iterating over an array.

1. While loop

The while loop creates an iteration that executes a specified statement as long as the specified condition evaluates to true. The specified condition is always checked before the statement is ran.


  // syntax
  while ( conditon ) {
    [statement]
  }

[condition]: This is an expression that is executed at every loop before the statement is performed. As long as the condition evaluates to true, the iteration continues, when it evaluates to false the loop breaks and the program continues with the statement after the while loop.

[statement]: This is a statement that is executed as long as the condition evaluates to true.

To loop over arrays with the while loop, the condition will be an expression of the decrement of the length of the array (e.g arrayLength--). Let's see some examples below.


   const players = ["messi", "ronaldo", "nedy", "kante"];
   let index = players.length;

   while (index--) {
     console.log(players[index]) // "kante", "nedy", "ronaldo", "messi"
   }

Doing this will result in accessing the elements of the array starting from the last element. To achieve the desired effect, one would need to:

Reverse the array before the while loop using the Array.prototype.reverse() method as shown below.


   const players = ["messi", "ronaldo", "nedy", "kante"];

   // reverse the array
   players.reverse();

   let index = players.length;

   while (index--) {
     console.log(players[index]) // "messi", "ronaldo", "nedy", "kante"
   }

Initialize a counter to -1 so that at the first run the counter would be incremented to 0, take look below


   const players = ["messi", "ronaldo", "nedy", "kante"];
   let index = -1;

   while (index++ < players.length-1) {
     console.log(players[index]) // "messi", "ronaldo", "nedy", "kante"
   }

(Thanks to @dovca for suggesting this method).

1. Do ... while loop

This method executes the statement first before checking if the condition is true until the specified condition evaluates to false.

  // syntax
  do {
    [statement]
  }
  while ( conditon )

Using a do ... while loop to iterate over an array can be tricky, because here the specified statement will run at least once before the condition is executed. Take a look at this example below


  const players = ["messi", "ronaldo", "nedy", "kante"];

  // reverse the array    0       1        2         3
  players.reverse() // "kante", "nedy", "ronaldo", "messi"

  let index = players.length;

  // itereation
  do {
    console.log(players[index]) // undefined, "messi", "ronaldo", "nedy", "kante"
  }
  while (index--)

In this scenario, we have an undefined because the statement was executed before the condition was run and as such the value for size is 4 while the array index ends at 3(players[3] = "messi"). The continue function will be used to skip the initial statement execution so that at the time it comes back around to perform the execution the value of size is 3 and we have messi logged to the console. Take a look below


  const players = ["messi", "ronaldo", "nedy", "kante"];

  // reverse the array    0       1         2         3
  players.reverse() // "kante", "nedy", "ronaldo", "messi"

  let index = players.length;

  // itereation
  do {
    // skip the initial statement
    if(index === players.length) {continue}
    console.log(players[index]) // "messi", "ronaldo", "nedy", "kante"
  }
  while (index--)

[Break] A break statement is used to stop a loop before the condition evaluates to true. As the name implies, it breaks the loop.

[Continue]: The continue statement is used to skip one iteration in a loop.

Conclusion

A lot has to be taken into consideration when using the while & do ... while loop to iterate over an array, I would advise that until the need arises one should use other iteration methods.

That's all for today, tomorrow we will talk about another set of functions used in array Iteration.

Here is the link to the other articles on this Array series written by me:

Got any question, addition or correction? Please leave a comment.

Thank you for reading. 👍