Loops By Chloe

Loops are used in Javascript to automate repetitive tasks. They are a type of iteration, meaning they repeat the same step over and over until a condition is met. Loops can help make your programme more efficient and concise. The different type of loops are FOR, FOR-IN, FOR-OF, WHILE and DO-WHILE.
We will go through each type below.

For Loops

For loops include three expressions that implement the repeated execution of a code block.
The first expression initializes the loop, by defining a variable, the variable is usually called 'i' (for iteration) as it is common between coders keeping the code consistent, but can be called anything.

The second expression is a condition for the loop to iterate through.

The final expression is a statement that is executed at the end of the loop. It is common for it to increment or decrement through a value, but can be used for any purpose.

An example of a for loop would be: 
        for(let i=0; i<4; i++){
        console.log(i);
        }

        =>
        0,1, 2, 3
4 would not be included because 4 is not less than 4 so does not meet the criteria.

Loops and Arrays

Loops can be used to modify arrays, coming in handy when you don't know the full length of an array or want to add elements into an array more efficiently.

In the following example, an empty array has been created, which has then been modified using an array with the .push method. 
            let example =[];

            for(let i=0; i < 3; i++){
            example.push(i);
            console.log(example);
            };

            => [0]
            [0, 1]
            [0, 1, 2]
When you don't know the length of the array but want to iterate through it, the .length method can be used. The loop will stop when the number of loops equals the length of the array. 

            let bike =['evil', 'giant', 'norco', 'conmencal'];

            for (let i=0; i < bike.length; i++){
            console.log(bike[i]);
            };

            = > 'evil'
            'giant'
            'norco'
            'conmencal'

Using the For...Of loop for Arrays

The for...of method is a newer method in the ECMA-6 language. It is a way of looping through an array, similar to above but using less code, this make the chances of error less and makes it more read-able. 

            let bikes =['evil', 'giant', 'norco', 'conmencal'];

            for (let bike of bikes){
            console.log(bike);
            };

            => 'evil'
            'giant'
            'norco'
            'conmencal'
As you can see in the example, you get the same results as before, but the code is cleaner.
It is also possible to print out the index associated with each element by using the pre-defined 'entries' method. 
            let bikes =['evil', 'giant', 'norco', 'conmencal'];

            for (let [index, bike] of bikes.entries()) {
            console.log(index, bike);
            };

            => 0 'evil'
            1 'giant'
            2 'norco'
            3 'conmencal'

Loops and Objects Using the For...In method

The for...in method iterates over properties of an object, this can be useful to easily access the properties of an object instead of looking through all the code which can take time. To show how this is done, a simple object of a bike will be used, using the for...in method to access all the property values, property names and then linking them together. 
        var bike ={
            brand: "conmencal",
            model: "furious",
            year: 2019,
            style: "downhill"
        };

        for(attribute in bike){
        console.log(attribute);
        };
        =>
        brand
        model
        year
        style
To access the property value you use the property name as the index value of the object: 
        for(attribute in bike){
        console.log(bike[attribute]);
        };
        =>
        conmencal
        furious
        2019
        downhill
To link them all together you would do the following: 
        for(attribute in bike){
        console.log(`${attribute}` + : `${bike[attribute]}`);
        };
        =>
        brand: conmencal
        model: furious
        year: 2019
        style: downhill

While Loops

The while loop is the most basic loop to construct in Javascript. The while loop will loop through multiple times as long as the specified condition is true. The syntax is as follows:

while(condition){
//code to be executed if condition is true.
}

An example of a while loop would be:
        let i=10

        while (i<10){
	       console.log(“I am happy!”);
	       i++; }

            =>
            “I am happy!”
            “I am happy!”
            “I am happy!”
            “I am happy!”
            “I am happy!”
            “I am happy!”
            “I am happy!”
            “I am happy!”
            “I am happy!”
            “I am happy!”

Do...While loops

Do...while loops are similar to while loops, however, it will always execute the code at least once, even if the condition is not true. The syntax for the do...while loop is:

do {
//execute code
} while (condition){
//code to be executed if true
}

An example of a do...while loop is:
        let x = 10;
        do {
        i++
        console.log(i)
        } while(i>9){
        console.log(i + 'is less than 9');
        }

        => 11

Infinite loops, break and continue keyword.

Infinite loops are loops that continue forever because the condition is always true.
They can cause browsers to crash.
AVOID INFINITE LOOPS AT ALL COSTS!

A way to avoid an infinite loop is to use the break keyword, this breaks the loop no matter where it is up too: 
        let i = 0;

        for (i=0; i<100; i++){
        console.log(i);

        if (i===50)
           break;
           }

        the loop will break after 50.
The continue keyword will skip an iteration and then continue on with the loop as normal: 
        var i;

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

        This will only log odd numbers.