JavaScript looping

Loops allow us to perform the same functions (or let the same events) happen over and over again.

In programming, we have two main types of loops:

• for loops - do something for a specific number of times
• while loops - do something until something else happens

Why loops?

We use loops because we want to use just one line to do some repetitive action, e.g. printing out numbers from 1 to 5; we could do this:

console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)

But what if we want to do that from 1 to 100? It would be far too repetitive to type console.log 100 times! There exists a fundamental concept called "DRY" in programming:

"Don't repeat yourself!"

If we find ourselves writing something more than once in a row, then we have likely repeated ourselves; we should instead strive to write an instruction in as few lines as possible!

Thus, the general idea of a loop is:

• do something, for a certain amount of time (or for as long as something happens)

For loop

We use this kind of loop when we know how many times we want to run the loop:

for (let counter = 1; counter < 10; counter++) {
  console.log(counter)
}

In that case, we want to:

• start the loop with a counter value of 1
• run the loop 10 times
• each time we run the loop, we increase the counter by 1

We do not necessarily have to start the counter value with 1, run the loop 10 times or increase the counter by 1. We can start at any number, run it any number of times and increase the counter by any integer!

Thus, in general, the for loop would look like this:

for (let counter = start; counter < endAtNumber; counter++) {
  // do something based on "counter" here
}

Breaking that down:

• the "counter" will begin at some number "start"
• the "counter" will end at some number "endAtNumber" (greater than "start")
• the "counter" will increase by 1 after each iteration (run of the loop)
• with each run of the loop, something will happen inside the curly braces

Reversing the order

We do not even necessarily have to increase the counter; we can decrease it too:

for (let counter = start; counter > endAtNumber; counter--) {
  // do something based on "counter" here
}

In the case above, the counter will end when it is no longer greater than endAtNumber:

• the "counter" will begin at some number "start"
• the "counter" will end at some number "endAtNumber" (lower than "start")
• the "counter" will decrease by 1 after each iteration
• with each run of the loop, something will happen inside the curly braces

While loop

We use the while loop if we want to stop a loop when a certain condition is no longer true:

let i = 0

while (i < 3) {
  i++
  console.log(i)  
} 

// Output:
1
2
3

In general:

let counter = 0 

while (counter < someInteger) {

  // do something here dependent on the counter variable
  
  // let the counter increment
  counter++
  
}

Do/while loop

We use the do { ... } while (...) loop when we wish to run a loop at least once:

let i = 0

do {
  i++
  console.log(i)  
} while (i < 1)

// Output:
1

With a while loop, nothing will output since the loop would exit before the console.log can print anything!

Break and continue

The keywords break and continue are not loops but special operators that allow us to manoeuvre through loops:

• break lets us exit the loop entirely
• continue lets us skip the current iteration of a loop
  • primarily used inside an if statement within a loop

Loops with objects and arrays

We will cover the following specialized loops in another article, as we will need to explain objects and arrays later:

• the for ... in ... loop (for objects)
• the for ... of ... loop (for arrays)