DEV Community

Geo Mukkath
Geo Mukkath

Posted on

A little post on JS loops

Loops

Loops in its most simple sense is a piece of code that can run until a particular condition is met.
Say you are at an event and tasked to hand out name tags to visitors. There are only 50 name cards you are allowed to distribute cause the venue can only support 50 guests. In such a scenario once you hand out the 50th name card, you withdraw from distributing any cards further.

Now since you are a Software Engineer the event managers ask you to build a program that can be used in a machine to do the exact same task. How would you go about it ?

JS offers a couple of ways all coming under the concept of loops.

The while loop

The while loops simply states that as as long as the condition is true - keep running.

The syntax is as follows:

while(true){
console.log('Truthy runs')
}
Enter fullscreen mode Exit fullscreen mode

To illustrate the above example we would use the while loop as follows:

let no_of_guests = 1;

while(no_of_guests <= 50){
let name = prompt('Pls enter your name: ');
console.log(name);
no_of_guests += 1;
}
Enter fullscreen mode Exit fullscreen mode

Let's break it down line by line with a pseudocode.

1.START

2.Initialize the no. of guests to 1.

3.While the number of guests is less than or equal to 50 do the following
*Declare a local variable called name and ask the user to input his/her name.
*print the name in the console
*Increase the count of the guests by 1

4.END


The Do While loop

The do while loop in it's simplest sense means, run it once and keep checking if the condition is met, if it's not - stop.

The Do while loop is very similar to the while loop except that there is one slight difference.

Have a look at the syntax and try figuring out:

do{
console.log('Whateva');
}while(condition);
Enter fullscreen mode Exit fullscreen mode

Back to our example, say there's a vip guest coming in and by convention you think that there's no need to check the guest list to let him in.

In that case the do while loop is useful.

let no_of_guests = 1; 
do{
let name = prompt('Pls enter your name: ');
console.log(name);
no_of_guests += 1;
}while(no_of_guests <= 49);
Enter fullscreen mode Exit fullscreen mode

Pseudocode:

1.START
2.Initialize the no. of guests to 1.
2.Do this
*Declare a local variable and ask the name of the user.
*Console log the name.
*Increase the count of guest/s by one.
3.While this condition is true keep doing running step 2.
4.END

NOTE: Here we check if the no_of_guests is less than or equal to 49 cause the total number cannot exceed 50.


The For loop

For loop in its simplest sense is divided into 3 functions - To initialize; to check a condition; to re-calculate count.

It's the most used and common loop you will encounter out of the three listed.

The Syntax is as follows

for(declare variable; check condition; re-calculate count){
// do something amazing 
}
Enter fullscreen mode Exit fullscreen mode

Four our name tag example the for loop would look something like this:

for(let i = 1; i <= 50; i ++){
let name = prompt('Pls enter your name: ');
console.log(name);
}
Enter fullscreen mode Exit fullscreen mode

The for loop is popular over the other two because of it's conciseness.

Pseudocode:

1.START
2.let i be initialized to 1
3.Is the condition met ?
*If yes then initialize name to what the user inputs.
*Print the name in the console.
4.END

Top comments (2)

Collapse
 
alocerio profile image
Leandro Bordon

I enjoyed read it

Collapse
 
iamtahazzot profile image
Tahazzot

Nice post.

You can also include for of and for in loop for any iterable objects. [MDN DOC]