CODING BYTES: PART 5 — Loops

What is a Loop?

In programming, loops are used to perform repeated tasks based on a set condition. As an example, if we wanted to run a piece of code x amount of times.

'for' Loop

    // A random array with my items from my football kit
    const kit = ['Sweater', 'Shorts', 'Socks', 'Ball'];

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

    /*
    Breakdown
    for (begin; condition; step) {
        // ... loop body ...
    }
    */

The for loop is the most commonly used and it can be tricky to understand what is going on at first, but lets break it down. Firstly, look at the syntax which is like an if statement. You have the for keyword, followed by parentheses for the conditions and the curly braces for the code that will be looped.

• const kit = ['Sweater', 'Shorts', 'Socks', 'Ball'];
  We are declaring an array to loop over (which is just another way of saying checking through / going through).

• for Similar to if, we are starting the for loop

• (let i = 0; i < kit.length; i++)
  This is where it gets a little confusing. For me, the i was the part which didn't click. So we can start with that. The i can be any letter or word, it is just used similar to a variable to indicate the element in question.

• Looking at the example above, when we declare i = 0, we are asking the loop to begin at point 0 in the array, which will be the beginning (sweater). (To see why 0 is at the first item you can read this article).

• i < kit.length is setting our condition stating while i is less than the length of our kit array, carry on looping.

• Finally i++ is the step to be taken on each loop. In our example, after each loop we want i to increment by one.

• { console.log(kit[i]); }
  Within the loop body, we are asking it to console.log() the element on each iteration of the loop.

• Specifically the kit[i] is referring to each element of the array, where kit is our array and [i] is pointing to the element.

😬 It may be a little crazy at first, but run through it a few times then try typing the example code out and watch the console for the output. There is also a for/in loop which we will cover in the future, enough 🤯 for now.

'while' Loop

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

    /* 
    Breakdown
    while (condition){
        code
        loop
    }
    */

Just be careful with ALL loops as you could end up running an endless loop if all the elements are not input correctly.

With the while loop you can see the similarities in structure and syntax. These are less common but once you've understood the for loop it should make sense enough. 😉

As loops can be awkward to get to grips with, practice as much as possible. Why not try out the tasks below?

Further Learning

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

1. Read the code above and write down what you think it will output before coding it yourself.

2. Change the for loop in to a while loop.

If you get stuck drop me a tweet 😃. Good Luck and happy coding!

This will be the last part of Coding Bytes for this year. For those celebrating, have a great time, see you next year. Happy holidays! 🎄

---

Thanks for reading. To keep up with my coding journey come say hi 👋 on twitter or on our #devNewbie Discord server where we have a friendly group of learners sharing their experiences.

Comments

[hsolatges]

May I ask why you choose to merely present the quite deprecated for(let …;…;…) in a es6 context?

If your article target very es6 beginners, then for(const … of …) is way better/easier than the old loop style.

And if you stick with the current one, may you present why it is useful, what features it has. In 2018, in a es6 context, I think you should justify the use of if(let …;…;…).

Also, you could loose the brackets in single line statement;