CODING BYTES: PART 5 — Loops
Tags: beginners, javascript, webdev
Published: 2018-12-14 14:27:17

---
title: CODING BYTES: PART 5 — Loops
published: true
description: Continuing with the Coding Bytes series, we take a look at loops. 
tags: beginners, javascript, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5x4fs51373qwt1der4n9.png
---
# 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

```javascript
    // 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](https://en.wikipedia.org/wiki/Zero-based_numbering)).

- `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

```javascript
 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

```javascript
  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](https://twitter.com/lawyerscode) or on our #devNewbie [Discord](https://discordapp.com/invite/mBsMP2H) server where we have a friendly group of learners sharing their experiences._