Mastering JavaScript Loops II

#javascript #webdev #programming #codenewbie

Learn how to iterate (repeat) a process in JavaScript

This is the second part of a series of articles, if you missed the first article, you can check here for it. We looked at the concept of loops and how they are implemented in JavaScript. We saw how the for loop works, used it and then manipulated our away out of a loop prematurely. For more information please visit the previous Article.

Skipping on to our focus for this article we will be looking at the two other types of loops;

While loops
Do loops

While Loops

While loops are useful for iterating a process while a condition is true, it is similar to the for loop. However a while loop will take in only one argument, a condition.

// SYNTAX
while(condition){
  // do some stuff

  // MODIFY CONDITION
  // AFTER TASK COMPLETED
  // example : condition++ OR condition-- 
}

So a while loop needs a condition to evaluate before it runs the code for the first time. This condition must be true for the loop to run initially, if it is false then the code will not run or will cease to iterate.

let i = 5;

while(i > -1){
  console.log(i)
  i--
  // prints 5, 4, 3, 2, 1, 0
}

When that code first runs, the condition is evaluated and i is greater than -1 (because we initially set it to 5) the code runs and i reduced by 1, the condition evaluates again and returns true (i is now 4 and), repeats the code till finally it gets to 0, i is reduced again and the condition is evaluated again, this time it returns false (i is now -1) and the code stops to iterate. We can also use it to loop through an array.

let myArr = [2,4,5,8,10]
var i = 0
while(i < myArr.length){
  console.log(myArr[i])
  i++
  //prints our 2,4,5,8,10
}

We can also use other type of conditions too

let myNum = 0
var bool = true

while(bool){
  myNum +=1
  console.log(myNum)
  if(myNum == 5){
    break
  }
}

Since we used a boolean in this example, we simply do an if check to determine the value of i and we used the break statement to stop iteration of the loop if i is equal to 5. While loops are just for loops dressed up differently. Try using a while loop to print the values of an array from the highest index to the lowest.

Do Loops

Do loops are a different kind of looping structures entirely. A Do loop will always run for the first time irrespective of the status of the condition, what i mean is that a do loop will fire the block of code for the first time without checking the condition, after that the condition is evaluated and further iteration is dependent on the status of the condition, if true the code iterates again, if false it stops.

var i = 0
do{
  i++
  console.log(i)

} while(i < 5)
// prints out 1, 2, 3, 4, 5

We can demonstrate that the code block runs first before the condition in the following example;

let i = 50

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

// prints 50

We get 50 logged to the console despite the fact that we said that the code should run while i is less than 10. That is the behavior of the do loop, basically you do something once and then again while a condition is true. You can use a do loop to
make a menu, to ensure that a task is only repeated once irrespective of a certain condition and then control iteration of the task based on the condition.

function doTask (){
    console.log('done task')
  }

  do{
    doTask()
  } while (false)

  // done task

That is that for this series, hope you enjoyed it. I will be making a series of articleon how to use webpack to bundle your javascript/typescript, css/sass/scss, markdown/jade
template so stay tuned.