JavaScript Loops.

When writing a program which requires an output of all numbers from 0 - 10, one way to write it is this:

 console.log(0);
 console.log(1);
 console.log(2);
 console.log(3);
 console.log(5);
 console.log(6);
 console.log(7);
 console.log(8);
 console.log(9);
 console.log(10);

But what if we needed to output to 1000? This would be so tiring. What we need is a way to run a code multiple times to give the required output without having to repeat lines of codes. This can be achieved using LOOPS.

Loops allow us to perform an action over and over again provided a condition is true.

Types of Loops

There are different types of loops; but I will only talk about 3 of them:

1. while Loop
2. do...while Loop
3. for Loop

The while Loop

This is the most-basic JS loop. It executes a block of code (statement) as long as a condition (expression) is true. Once the condition becomes false, the loop stops.

Syntax

while (condition) { code block to be executed if condition is true }

Here is an example:

let count = 0;
while (count < 10) {
    console.log(count);
    count++;
}

output is

0 1 2 3 4 5 6 7 8 9.

Console returns count value each time until the condition is no longer true; and at each time the value is incremented.

But if the condition were changed to while (count > 10);

Console returns nothing.

The do...while Loop

This is like the while loop but this checks the condition at the end of the loop i.e. the statement will (always) be executed at least once, even if the condition is false.

The condition determines whether or not the loop should continue or stop immediately.

Syntax

do {statement} while(condition)

Here's an example

let count = 0;
do {
      console.log(count);
      count++;
} while (count < 5);

output is

0 1 2 3 4.

Console returns values for as long as the condition is true

But if the condition were changed to while (count > 5); Console returns 0; the initial value of count.

The major difference between while and do...while loops:

while loops, if the condition is not true, there is no output;

do...while loops, whether the condition is true or not, the code is run at least once...

The for Loop

This is the most compact form of looping. It includes 3 statements in parenthesis:

1. Statement 1: also known as initialization is a starting value. It is always executed before the loop begins.
2. Statement 2: this is the condition to be tested; if this remains true, the loop runs. It functions like the while loop expression.
3. Statement 3: this is the iteration statement. It is like the while loop statement that should be executed at every loop.

   Syntax

   for (statement 1; statement 2; statement 3) {code block}

This roughly equates to the while loop.

statement 1 (initializing a variable);

while (statement 2) {code block; statement 3;}

Example:

for (let i = 0; i < 3; i++) {
    console.log(i);
}

output is 0 1 2

Same as:

let i = 0;
while (i < 3) {
    console.log(i);
    i++;
}

NB: All three statements are optional.

Statement 1 can be omitted when initial values are set before the loop starts

let i = 0;
for (; i < 3; i++) {
   console.log(i);
}

Statement 2 (defines the condition for the loop to run) can be omitted but a loop control (talk about this later in a new post) like break must be provided to know when the loop will stop

for (let i = 0; ; i++) {
   if (i === 3) {
       break;
   } 
  console.log(i);
}

output is

0 1 2 3

Statement 3 can be omitted when the code line is placed in the loop code block.

let i = 0;
for (; i < 5; ) {
   console.log(i);
   i++;
}

output is 0 1 2 3 4

While omitting the statements, always add corresponding semi-colons.

The for loop can also be used to get contents from an array

Example

const myArr = ["Ade", "Bade", "Cade"];
for (let i = 0; i < myArr.length; i++) {
    console.log(myArr[i]);
}

output is:

"Ade" "Bade" "Cade"

If we omit all statements...we get an infinite loop

This will be all for now. In later posts, I will be talking about Loop Control. Watch out!!! I hope you find this helpful, kindly like and leave a comment. And if there is anything you would like to add or any corrections...add in the comment section.

Thanks for reading through.