JavaScript Loops #1

Part One

Hi 👋, My name is Matthew Okiemute, a frontend developer loves learning and sharing my experiences while learning. So if you're starting a career in tech and have started learning JavaScript don't be scared we're going to go through it together.

So I will be sharing my thoughts and explaining some of basics concepts in Javascript and some pretty advance 👨‍💻 stuffs later as we proceeds.

In this part we will be learning about some of the loops in javascript. Loops are a very important parts of programming as a whole, but what exactly are loops?

What is a loop? A loop is a sequence of instructions that is done repeatedly until a certain condition is met. Meaning things are done over and over.... until the set conditions are met. A loop allows you to execute a number of code for a specific number of time. Loops also gives you the leverage to iterate through a block of code multiple times and reduces writing longer codes over and over again. For example, keep adding one to "n" until n is equal to 10.

 let n = 0;
do {
 n = n + 1;
console.log(n);
} while( n <= 10 );
//output: 1 2 3 4 5 6 7 8 9 10

So we will be learning about the following loops in this section:

• if...else loop
• while loop
• do...while loop
• for loop

Okay let's dive in,

1. IF ELSE LOOP

The if else loop is use to execute blocks of codes if a certain condition is reached else it should do something else. The IF ELSE loop has the following structure shown below:

if( condition ) {
    execute this block of code;
} else {
    execute this block of code;
}

The if...else loop can take on several cases, and it's also used a lot in programming

let n = 3;
if( n < 0 ) {
  console.log("n is less than 3")
} else {
  console.log("n is greater than 3")
}
// expected output: "n is greater than 3"

2. WHILE LOOP

The while loop checks for the condition first before the block of code can be executed. For example, while there're still problems in the world developers should continue building awesome solutions for them. The moment there are no more problems in the all developers should rest 😂.
The WHILE loop has the following structure below:

while(condition){
  execute this block of code;
}

Below is an example of while loop

let n = 0;
while (n < 3) {
  n++;
}
console.log(n);
// expected output: 3

3. DO WHILE LOOP

A do while loop executes the code block first and then checks the condition, and it does this repeatedly until the condition is meant then the whole process stops. Let's take a look at it's structure:

do {
   execute this code block;
} while( condition )

Below is an example of do...while loop

let output = ' ';
let i = 0;

do {
  i = i + 1;
  output = output + i;
} while (i < 5);

console.log(result);
// expected result: "1 2 3 4 5"

4. FOR LOOP

The for loop is the most popular kind of loop, you should have seen it a lot while watching tutorials or reading programming textbooks. So for loop has three major part:

1. Initialization part
2. Checking/conditional part
3. Incremental/decremental part
4. The body

Let's take a look at how a for loop looks like then explain the parts from it.

for( condition ){
   execute this code block;
}

This is an example of a for loop

for( let n = 0; n <= 6; n++ ){
   console.log(n = n * 2);
}
// expected output: "0 2 6"

The Initialization part: This is where the begins from, it means the first value of n should be 0, then multiply it by 2.

let n = 0;

The checking part: This part of the condition tells the computer how many times it should run this loop and stop immediately the condition has been reached. So by the time n gets to 6 the process should stop.

n <= 6;

The incremental/decremental part: This part of tell the computer to either keep increasing/decreasing the variable involved until the end of the process.

   n++;
  //increases the value of n by adding 1 at each iteration
    n--;
  //decreases the value of n by substracting 1 at each iteration

The body: This is where you write in your code snippet that you which to compute/run.

There are other types of loops that we will also talk about, you can check them out in my next article on JavaScript Loops #2. In there we talk about for...in, for...of and more code examples about loops in general.

Feel free to drop your questions/contributions if you're clear with any of the examples in the comment section below 👇 or you can reachout to me via twitter @OkiemuteMatthew 💬

External Resources

• FreeCodeCamp Loops

• Javascript.info

• JavaScript MDN Loops & Iteration