A Simple Guide to Loops In JavaScript( for, for...in, for...of, while and do...while loop)

Welcome to this lesson, in this lesson, we are going to talk about loops and cover:

• What are loops?
• for loop.
• for...in loop.
• for...of loop.
• while loop.
• and do...while loop.

What are loops?

We all use for, do-while, while and other forms of loops, but do we really understand them?

Loops refer to a structure, series, or process, the end of which is connected to the beginning.

This means that when a loop comes to an end, it goes back to the beginning. In short, it repeats a process over and over again based on given conditions.

Examples of loops in the real world.

1. Day and Night
2. Life and Death
3. Sleeping and Waking
4. Eating

JavaScript Loops

Loops offer a quick and easy way to do something repeatedly in JavaScript.

For loop

"for" iterates through a block of code a number of times.

"for" does have initializer, conditional and iterator all separated by semi-colons: (;) as in:

for(initializer; conditional; iterator) {
   //code block
}

The "initializer" always refers to the starting point of a for loop.

The "conditional" refers to the condition that must be met for the loop to continue or stop.

And iterator refers to incrementing or decreamenting of the "initializer" by a certain value and the counter can then be used in the "for loop" block as in:

for(let counter = 0; counter < 20; counter++) {
    console.log(`Counting ${counter}`);
}

Boom! You can see we are now counting from 0 to 19.

Let's use it with an array.

let arrayOfPeople = ['Ayobami', 'Ope', 'Ibrahim'];

for(let index = 0; index < arrayOfPeople.length; index++) {
    console.log(`${ arrayOfPeople[index] } altered`)
}

With the "for loop", we are to pick each of the items of the arrayOfPeople with their index and add something to them one by one.

Let's explain this "for loop".

By the first iteration of the loop, the index will be 0 and in the "for loop" block, we do:

arrayOfPeople[index] which is similar to arrayOfPeople[0] that means picking the first item('Ayobami') as the index of an array starts from 0.

By the second iteration, the index will be 1 and in the "for loop" block, arrayOfPeople[index] will be interpreted as arrayOfPeople[1] that means picking the second item('Ope') and that will continue until index is no longer less than the length of the arrayOfPeople.

For...in loop

for/in is used to loop through the properties of an object.

let's say we have an object:

let students = {
    fisrtClass: 'Ayobami',
    secondClass: 'Temi',
    thirdClass: 'Teni'
}

We can use "for...in" loop to traverse(iterate) the properties of students object as in

let students = {
    fisrtClass: 'Ayobami',
    secondClass: 'Temi',
    thirdClass: 'Teni'
}

for(property in students) {
    console.log(property)
    console.log(students[property]);
}

Voila! We have looped through the object property. Mind you, firstClass, secondClass and thirdClass are the properties of "students"

for...of loop

for/of is used to loop through the values of an iterable.

That means it gets the value instead of the index of an array or string. Now, let's make use of it as in:

Array example

let persons = ['Ayobami', 'Ope', 'Ibrahim'];

for (person of persons) {
    console.log(person);
}

String example

let name = "Ayobami";

for(alphabet of name) {
    console.log(alphabet)
}

Yeah! We have done that!

While loop

"while loop" is used to iterate through a block of code while a specified condition is true.

Let's see while loop in action.

In this example, the code in the loop will be executed, over and over again until "counter" is 5 or greater than 5.

let counter = 0; 
while ( counter < 5 ) {
   console.log('The counter is less than 5' );
}

This "while loop" will run until it crashes the browser because counter will always be less than five.

But we can also make it stop by increamenting the counter within the while loop block as in:

let counter = 0; 
while ( counter < 5 ) {
   console.log('The counter is less than' + ' ' + counter++);
}

That is a basic introduction to "while loop" and it takes us to do/while loop.

Do...while loop

"do...while loop" is used to traverse through a block of code while a specified condition is true but it is unlike the "while loop" because the "do block" will run before the condition is tested, that means, the code in the do block will execute first before the condition is tested as in:

let win = false;
do { 
    let gift = 5;
    console.log(gift++)
} 
while ( win == false ) 

In this case, the do block will run and 5 will be logged in the console because win is false.

Now, let change the win's value to true and the loop will run forever because the condition will always be true as in:

let win = true;
do { 
    let gift = 5;
    console.log(gift++)
} 
while ( win == true ) 

Can you see that?

It is running without stopping.

Basically, "while loop" is used when you don't want to execute the code block if the condition is not met but do-while loop is used when you want to run the code block once before checking the condition.

Before ending this lesson, what is the difference between "for loop" and "while loop"?

That question is for you.

See you in the next lesson.

One more thing

Are you having difficulties to learn and understand JavaScript and build projects with it? JavaScript for a Total Novice teaches JavaScript and Project Making Fundamentals with simple illustrations and examples that make everything so easy. You can now handle any difficult projects without fear.

Don't trust me, get a free preview to judge by yourself: https://bit.ly/3o3TMyg