Logo Tutorial on loops

Loops are a way to repeat something a certain number of times or while a condition is true.
If you are ever finding yourself repeating some code over and over but with a slight change everytime, you could probably make the code shorter and more dynamic with loops.

Loops can actually be configured creatively and in any way you'd like, but the most common way to use them is in the following way: 

JavaScript


for (start value; condition of value, change in value) {
    //Do something a fixed number of times
}

while (condition) {
    //Check the condition
    //Do something again and again as long as the condition is true
}

do {
    //Do something
    //Then check the condition
    //Do that something again and again as long as the condition is true
} while (condition);

Let's run through some examples to better understand what they do and how they are constructed.

The for loop is mostly used when you want to do something a fixed number of times. In this case we make the loop run through three times and then output a message to the console saying we have finished running through the loop.

First we create a variable (i) and give it a start value (let i = 1).

The starting value of the variable i is set to 1, meaning the first run through the code inside the curly brackets ({}), the ouput to the console is "Run number: 1".

Then we create the condition (i <= 3).

Here the condition is saying that if i is less than or equal to 3, just continue the looping process.

Then we tell the loop to increment i by one after each runthrough (i++).

First i is 1 and the code between the brackets ({}) are run. When the code has run, i is incremented to 2 (i++), and the code between the brackets are run again, then i is set to 3, code runs again, and finally i is set to 4 and the condition tells us that it is no longer less or equal to 3 and therefore exits the loop (before running the code a fourth time). 

JavaScript


for (let i = 1; i <= 3; i++) {
    console.log("Run number: " + i);
}

console.log("The loop has finished its runthrough!");

//Output in the console:
//Run number: 1
//Run number: 2
//Run number: 3
//The loop has finished its runthrough!

The while loop is a bit easier to understand (I think).

It checks a condition and then runs code, then checks the condition, runs code, check condition, run code.
This will continue forever or until the condition is somehow set to false. If it's never set to false, we effectively create an infinite loop. So be carefull not to do that!

In our example here, we declare a variable (myString) and feed it an empty string.
Then we create the loop where we make the condition (if myString is not equal to "aaa"), meaning that the code inside the brackets will run again and again as long as myString is not "aaa".
The code inside the brackets just adds an "a" to myString each time it runs through the loop. 

JavaScript


let myString = "";

while (myString != "aaa") {
    myString = myString + "a";
    console.log(myString);
}

console.log("The loop has finished its runthrough!");

//Output in the console:
//a
//aa
//aaa
//The loop has finished its runthrough!

The do/while loop is easy as well. The difference is that the do/while loop will run the code before it checks the condition.
The while loop checks the condition first, then runs the code.

So a simple example showing the difference, where we declare the string variable myString with the value "aaa".
The while loop first checks if myString is not equal to "aaa", which in this case is false, and therefore never goes into the loop: 

JavaScript


let myString = "aaa";

while (myString != "aaa") {
    myString = myString + "a";
    console.log(myString);
}

console.log("The loop has finished its runthrough!");

//Output in the console:
//The loop has finished its runthrough!

With the same declaration of myString set to "aaa", the do/while loop runs the code first, adding "a" to myString, making it "aaaa", then checks the condition which in this case will never become false, since "aaaa" with x amount of "a"'s added to it, will never equal "aaa": 

JavaScript


let myString = "aaa";

do {
    myString = myString + "a";
    console.log(myString);
} while (myString != "aaa")

console.log("The loop has finished its runthrough!");

//Output in the console:
//aaaa
//aaaaa
//aaaaaa
//...
//And so on, and so on, and so on... Infinitely!

Hope you learned something. If not, just keep at it, and your mind will eventually say something like "oh, was it that simple? Geeez...".