Emanuele Feronato

Talking about Javascript.

This it my take to create a mini-guide to modern javascript that does not contain boring theory but just quick notions and examples.

The goal is to create a very quick guide that users can refer to when engaged in more complicated tutorials, or even just to get the basics of JavaScript

All topics will be covered, but this time we are talking about loops.

Loops are used to repeat the execution of the same block of code multiple times.

while

Executes some code while the condition is true.

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

Real world example:

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

/*

RESULT

0
1
2
3
4

*/

It might happen that the code is never executed:

let i = 100;
while (i < 5) {
    console.log(i);
    i ++;    
}

// will never enter the while loop

do..while

Executes some code, then checks if the condition is true to execute it once more, and so on.

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

Real world example:

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

/*

RESULT

0
1
2
3
4

*/

Unlike while, do..while executes the code at least one time:

let i = 100;
do {
    console.log(i);
    i ++;
} while (i < 5);

/*

RESULT

100

*/

for

Executes some code a certain number of times.

for (firstAction; condition; step) {
    // code to be executed
}

Its structure is a bit more complex, let’s see it in detail:

firstAction: it’s executed before entering the loop, only the first time.

condition: enters the loop if the condition is true.

step: it’s executed at the end of the loop, at each iteration.

Please note: firstAction is executed only once, while step is executed at each iteration.

Real world example:

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

/*

RESULT

0
1
2
3
4

*/

Loops which won’t work

If you don’t set the variables right, there will be cases where you will never enter the loops.

In this case while‘s condition expects i to be greater than 5, but i is zero.

let i = 0;
while (i > 5) {
    console.log(i);
    i --;    
}

// will never enter the while loop

In this case for‘s first action sets i to 10, but the condition expects i to be smaller than 5.

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

// will never enter the for loop

Infinite loops

Not properly setting variables could also lead to infinite loops.

These are loops that never stop executing code and could consume all computer resources or cause you to lose control of the process.

This loop will run forever because i will always be smaller than 5.

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

/*

RESULT

0
0
0
... forever...

*/

This loop too will run forever because i will always be smaller than 5.

let i = 0;
do {
    console.log(i);
    i --;
} while (i < 5);

/*

RESULT

0
-1
-2
-3
-4
... and so on...

*/

This loop will run forever because i will always be greater than 5.

for (let i = 10; i > 5; i ++) {
    console.log(i);
}

/*

RESULT

10
11
12
13
14
... and so on...

*/

There are plenty of other situations where you can generate endless loops. It’s up to you to avoid them.

Breaking a loop

Sometimes you may want to force the exit from a loop regardless of its condition.

In order to do this, use break.

In this example we exit the loop when i is equal to 5.

let i = 0
while (i < 10) {
    console.log(i);
    i ++;
    if (i == 5) {
        break;
    }
}

/*

RESULT

0
1
2
3
4

*/

In this case we exit the loop when i is lower than zero.

let i = 0;
do {
    console.log(i);
    i --;
    if (i < 0) {
        break;
    }
} while (i < 5);

/*

RESULT

0

*/

In this case we exit the loop when i is greater than 2.

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

/*

RESULT

0
1
2
3

*/

Skipping an iteration

There are also cases where you don’t want to exit the loop, but would rather skip one iteration and continue from the next one.

In order to do this, use continue.

In this case, we skip all iterations where i is greater than 2.

let i = 0;
while (i < 5) {
    if (i > 2) {
        continue
    }
    console.log(i);
    i ++;    
}

/*

RESULT

0
1
2

*/

In this case, we skip the iteration where i is equal to 2.

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

/*

RESULT

0
1
3
4

*/

for..in

Loops through all keys in an object.

for (let key in object) {
    // code to be executed. where "key" changes at each iteration using actual object's key
}

Real world example:

const myObject = {
    attribute1 : 'some string',
    attribute2 : 100,
    attribute3 : false  
}

for (let key in myObject) {
    console.log('attribute called', key, 'is', myObject[key]);
}

/*

RESULT

attribute called attribute1 is some string
attribute called attribute2 is 100
attribute called attribute3 is false

*/

for..of

Loops through all items in an array.

for (let item of array) {
    // code to be executed. where "item" changes at each iteration using actual array's item
}

Real world example:

const myArray = ['item1', 'item2', 'item3'];

for (let item of myArray) {
    console.log('here is the item', item);
}

/* 

RESULT

here is the item item1
here is the item item2
here is the item item3

*/

Is there anything else you would like to see about loops?