Understanding Javascript Array Series V - Array Loops & Iteration Part II
Tags: javascript, beginners, webdev
Published: 2019-10-03 22:33:12

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

{% link https://dev.to/nedyudombat/understanding-javascript-array-series-iv-array-loops-iteration-part-i-334j %}

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.
```javascript

  // 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.

```javascript

   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.

```javascript

   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
```javascript

   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.
```javascript
  // 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
```javascript
   
  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


```javascript
  
  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:
* [What is an Array?](https://dev.to/nedyudombat/understanding-javascript-array-series-i-what-is-an-array-l1i)
* [Alternate ways of Creating an Array.](https://dev.to/nedyudombat/understanding-javascript-array-series-ii-alternate-ways-of-creating-an-array-26c8)
* [Array Properties](https://dev.to/nedyudombat/understanding-javascript-array-series-iii-array-properties-43co)
* [Array Loops & Iteration Part I] (https://dev.to/nedyudombat/understanding-javascript-array-series-iv-array-loops-iteration-part-i-334j)
* [Array Loops & Iteration Part III] (https://dev.to/nedyudombat/understanding-javascript-array-series-iv-array-loops-iteration-part-iii-4f38)

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

Thank you for reading. :thumbsup: