Loops in JavaScript…30daysofjavascript => Day 8

a loop

Looping comes in handy, it is used when you want to run through a code over and over and more interestingly with a different value. Now looping is a necessary evil, you have to loop strings, numbers, and even an object, as a matter of fact, you have to do it in every application as you might want to go over a list of items or even repeat a block of code. There are different types of loops in JavaScript:

1. For Loop: This loops over a block of code a number of times. This kind of loop is common when looping over numbers.
2. For/In Loop: This loops over the properties of an object.
3. For/Of Loop: This loops over the values of iterable object.
4. While Loop: Used to loop over a block of code when a condition exists especially when a specified condition is true.
5. Do/while Loop: This also loops over a block of code while a specified condition is true.

For Loop

For loop syntax :

for (statement 1; statement 2; statement 3) {
// code block to be executed
}

Statement 1 is executed (one time) before the execution of the code block. Normally you will use statement 1 to initialize the variable used in the loop (i = 0).This is not always the case, JavaScript doesn’t mind and also statement 1 is optional. You can also initiate many values in statement 1 (separated by comma).

Statement 2 defines the condition for executing the code block. Often statement 2 is used to evaluate the condition of the initial variable. This is not always the case, JavaScript again doesn’t mind and this statement is optional. If statement 2 returns true, the loop will start over again, if it returns false, the loop will end.

Statement 3 is executed (every time) after the code block has been executed. Often statement 3 increments the value of the initial variable. This statement can do anything like negative increment (i — ), positive increment (i = i + 15), or anything else. Statement 3 can also be omitted (like when you increment your values inside the loop).

Example:

simple for loop

The above is a simple loop that allows you to count from 0–10.

Detailed Explanation

• i is a variable, it does not necessarily have to be i but the standard convention suggest i, apparently there is no exact reason for this. In the above snippet, the variable was declared inside the first statement, you can choose to do that outside the loop but you.
• The first statement tells the loop to start from 0, which means if you decide to change yours to 1 it will count from 1 to 10.
• The second statement tells JavaScript to stop when it gets to the number closest to 11 i.e. 10.
• The third statement tells JavaScript to increase the number of the the initial value by one, this also increases the next values until it gets to a false condition i.e. when its gets to the number closest to 11.

For/In Loop

This loop statement loops over the properties of an object with the following syntax:

for (key in object) {
// code block to be executed
}

for in loop of an object

Detailed explanation

• The for in loop iterates over a bookDetails1 object
• Each iteration returns a key (x)
• The key is used to access the value of the key
• The value of the key is bookDetails1[x]

The for/in loop statement also loops over the properties of an array with the following syntax:

for (variable in array) {
code
}

for in loop in an array

For/Of Loop

The JavaScript for/of statement loops through the values of an iterable object. It lets you loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and more. The for/of uses the syntax

for (variable of iterable) {
// code block to be executed
}

For of loop

While Loop

The while loop loops through a block of code as long as a specified condition is true. The while loop uses the following syntax:

while (condition) {
// code block to be executed
}

a while loop

The above code decreases the value of the initial number by one and repeats until it gets to zero.

Do While Loop

The do while loop is a kind of while loop that goes through the task first and repeats as long as the condition is true. It uses the following syntax:

do {
// code block to be executed
}
while (condition);

do while loop

The break statement

Ordinarily, a loop will continue to run until the condition is false. But we can forcefully stop a loop by using the break statement, break is automatically used to exit a loop. In the example below, the break statement exits after the third count even though the counter had been set from 0 to 1.

break statement in a loop

The continue statement

The continue statement breaks one step in the loop, if a specified condition occurs, and continues with the next step in the loop. You can say you use the continue statement when you want to skip a step. The example below skips the number 5 and continues with the rest of the loop and if you look closely you will notice that the number 5 is missing.

continue statement

Conclusion

So far we have been able to simplify what is usually a big deal to most developers (at least before now the examples was quite a big deal for me and I could barely cope and even when I copied and pasted it, some do not work or I do not understand them at all).