Loops

If we were to write a program that printed the integers 1 through 10, we could do so by writing 10 `console.log()` statements. This is doable, but we would write more code than what is needed. This would become apperant, and a lot of repetetive work, if we were to print every number from 1 through 100. If we have any task that needs to be done more than once, we should do the task in a loop. A loop is a control structure that allow us to do repetitive tasks, but only writing the code once (ish).

There are two kind of loops, `for loops` and `while loops`.

For loop

The for loop is written as such:

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

This loop would print every number from 0 through 9. The loop is written using the for keyword, followed by an opening and closing parentheses. Inside the parentheses there are three arguments that needs to be present (you'll learn about arguments later on). The first one let i = 0 is the variable that states what index the loop should start at. Remember that a list's first element is the 0th element, and if you want to do something with every element in a list, you need to start at the beginning. However, if we were to print every number from 1 through 10, we could instead have set i to be 1. let in this case can be replaced by var, but not const.

The second argument indicates when the loop should continue to be executed. In this case the loop should be executed as long as the variable i is less than 10. Should we want to print every number 1 through 10, this argument should be changed to either i <= 10 or i < 11. But how is the variable updated so that it can go from 0 to 10? We find the answer in the third argument. This argument decides how the variable i is updated for each iteration, that is each time the code is executed. In this case we have written the code shorthand for i = i+1, which updates the variable with 1. If we would like to update the variable with 2 for each iteration, we would could write i+=2 (which is another way of saying that the current variable is equal to itself plus 2).

Inside the code block (between the curly brackets {}) we can write what code we like. If we have a list of superheroes that we like, and want to print all of them, we could to it like this:

const superheroes = ["Spider-Man", "Iron Man", "Batman", "Green Lantern"]

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

>> "Spider-Man"
>> "Iron Man"
>> "Batman"
>> "Green Lantern"

While loop

While loops, unlike for loops, have no variable that's being updated. Similar to for loops, however, is that it does have a conditional for when to run. As long as the condition holds true, the while loop will continue to run the code block. A while loop is written as:

let i = 0

while (i < 10) {
    i+=1
}

In the example above, we have a variable i that have 1 added to it's value for each iteration. This will happen as long as i is less than 10. As can be seen, this is equal to the for loop written in the previous section. If we don't update the variable, i.e. making sure that the variable will be 10 or greater at some point, the loop will never end.

The while loop is useful when we want to do some operation until something happens, i.e. ask a user for his/hers name until it is provided.

Break and continue

While iterating (using a for or while loop) it could be necessary to quit the loop, e.g. i we have found something we were looking for in a list. To do this, we use the keyword break.

let superheroes = ["Spider-Man", "Iron Man", "Batman", "Green Lantern"]

for (let i = 0; i < superheroes.length; i++){
    if (superheroes[i] == "Batman"){
        console.log\("I found Batman!"\)
        break
    }
    console.log("Not Batman")
}

In the example above we want to find Batman, and when we have found him, there isn't really any need to continue searching. Using the keyword break will then quit the loop. If there is any code after the loop, the program will continue to run from there.

The keyword continue will break one iteration in the loop and continue with the next one.

let superheroes = ["Spider-Man", "Iron Man", "Batman", "Green Lantern"]

for (let i = 0; i < superheroes.length; i++){
    if (superheroes[i] == "Batman"){
        continue
    }
    console.log(superheroes[i])
}

In the example above, we want to print every superhero, except Batman. Using the keyword continue allow us to do so. When the string "Batman" is found, it will break that iteration, and continue with the next.

Last updated