LOOPS IN JAVASCRIPT

CYCLE FOR

Loops can execute a block of code a certain number of times. They are useful if you want to run the same code over and over again.

LOOP TYPES.

JavaScript supports several types of loops:

for – runs a block of code a number of times
for/in – scrolls the properties of an object
for/of – scrolls the values of an iterable object
while – runs a block of code while a specified condition is true
do/while – variant of the while loop. It also scrolls a block of code while a specified condition is true. Runs the cycle at least once.

FOR LOOP SYNTAX

for (statement 1; statement 2; statement 3)

Statement 1 is executed (once) before the code block is executed.
Statement 2 defines the condition for execution of the code block.
Statement 3 is executed (each time) after the code block is executed.

for(let i = 0; i < 5; i++)

From the example above, you can read:

Statement 1 sets a variable i before the loop begins (i = 0), statement 2 defines the condition for loop execution (i must be less than 5),statement 3 increments the value i++ each time the code block has been executed.

STATEMENT 1

It is executed only once, normally statement 1 is used to initialize the variable used in the loop (let i = 0).This is not always the use case. Statement 1 is optional. It is possible to have many values separated by commas:

for (let i = 0, len = cars.length, text = ""; i < len; i++)

You can omit statement 1 by setting the values before the cycle starts:

let i = 2;
let len = cars.length;
let text = "";
for ( ; i < len; i++)

STATEMENT 2

Statement 2 is used to evaluate the condition of the initial variable. If it returns true, the loop continues; if it returns false, the loop ends. If you omit statement 2, you must provide a break within the loop, otherwise the loop will never end (Infinite Loop). This will crash your browser.

STATEMENT 3

It is executed for each iteration of the for loop, statement 3 usually increments the value of the initial variable. This is not always true; the statement is optional. Statement 3 can make a negative increment (i–), positive increment (i = i + 15). It can also be omitted (the important thing is to increment or decrement as appropriate the control variable to exit the loop):

let i = 0;
let len = cars.length;
let text = "";
for (; i < len; )

SCOPE

var i = 5;
for (var i = 0; i < 10; i++)
// Here i is 10

using let you have instead:

let i = 5;
for (let i = 0; i < 10; i++)
// Here i is 5

In the first example, using var, the variable declared in the loop redeclares the variable outside the loop. In the second example, using let, the variable declared in the loop does not declare the variable again outside the loop. When using let to declare the variable i in a loop,
the variable i will be visible only within the loop.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Loop</title>
    <script>
        function loopFor()
        {
            const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
            let text = "";
            for (let i = 0; i < cars.length; i++) {
                text += cars[i] + "<br>";
            }
            document.getElementById("demo").innerHTML = text;
        }
        //Statemet 1 con più istruzioni
        function loopForVariante1()
        {
            const cars = ["BMW", "Volvo", "Saab", "Ford"];
            let i, len, text;
            for (i = 0, len = cars.length, text = ""; i < len; i++) {
                text += cars[i] + "<br>";
            }
            document.getElementById("demo").innerHTML = text;
        }
        //Statement 1 assente
        function loopForVariante2()
        {
            const cars = ["BMW", "Volvo", "Saab", "Ford"];
            let i = 2;
            let len = cars.length;
            let text = "";
            for (; i < len; i++) {
                text += cars[i] + "<br>";
            }
            document.getElementById("demo").innerHTML = text;
            }
    </script>
</head>
<body>
    <h2>JavaScript ciclo For</h2>
    <p id="demo"></p>
    <button onclick="loopFor()">Ciclo For</button>
    <br>
    <br>
    <button onclick="loopForVariante1()">For Variante 1</button>
    <br>
    <br>
    <button onclick="loopForVariante2()">For Variante 2</button>
</body>
</html>

CYCLE FOR IN

The JavaScript for in statement flows the properties of an object:

for (key in object)

const person = ;

let text = "";
for (let x in person)

//output John Doe 25

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

FOR LOOP IN THE ARRAYS

The JavaScript for in statement can also step through the properties of an array:

for (variable in array)

const numbers = [45, 4, 9, 16, 25];

let txt = "";
for (let x in numbers)

//output 45 4 9 16 25

Do not use for in on an array if index order is important. The order of the index depends on the implementation, and it may not be possible to access the array values in the expected order. It is better to use a for loop, a for of loop, or Array.forEach() when order is important.

Copy to Clipboard

CYCLE FOR OF

BROWSER COMPATIBILITY

The JavaScript for of statement scrolls the values of an iterable object. It allows you to scroll through iterable data structures such as arrays, strings, maps, NodeLists, and more:

for (variable of iterable)

variable – At each iteration the value of the next property is assigned to the variable. The variable can be declared with const, let or var.
iterable – An object with iterable properties.

const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for(let x of cars)

Copy to Clipboard

WHILE CYCLE.

The while loop loops a block of code until a specified condition is true.

while (condition)

let i = 0;

while (i < 10)

If you forget to increment the control variable i used in the condition, the loop will never end. This will crash the browser.

Copy to Clipboard

DO WHILE CYCLE.

The do while loop is a variation of the while loop. This loop will execute the code block once, before checking if the condition is true; then, it will repeat the loop until the condition is true.

do
while (condition);

The following example uses a do while loop. The loop will always be executed at least once, even if the condition is false, because the code block is executed before the condition is verified:

let i = 0;

do
while (i < 10);

Don't forget to increase the variable used in the condition, otherwise the loop will never end!

BREAK AND CONTINUE

The instruction break "exits" from a loop.
The instruction continue "skips" an iteration in the loop.

let text = "";

for (let i = 0; i < 10; i++)

OUTPUT

//The number is 0
//The number is 1
//The number is 2

let text = "";

for (let i = 0; i <= 5; i++)

OUTPUT

//The number is 0
//The number is 1
//The number is 2
//The number is 4
//The number is 5

LINKS TO PREVIOUS POSTS

THE JAVASCRIPT LANGUAGE

LINK TO CODE ON GITHUB

GITHUB