Loops are used to doing the same thing repeatedly, and this action is called iteration.
The code below has several console.log() methods, which output the number between the parenthesis to the browser console.
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
Expected output:
1
2
3
4
5
In the code example above, we already have five lines of code for what is essentially the same action, just changing up the value which is being logged. Looping is one of the core elements of most programming languages and helps us to automate repeated processes like the one we’ve just looked at.
There are multiple types of loops which have their own use cases, the most common in JavaScript being the for loop, which we will be looking at now.
for loop
If you run the code below, you will see that the browser outputs the same as in the first example with multiple console.log() methods. Basically, the piece of code within the curly braces also called a code block, is executed five times.
for (var i = 1; i <= 5; i++) {
console.log(i);
}
Expected output:
1
2
3
4
5
The for loop syntax
This piece of code might look daunting at first glance, but once you’ve broken down the “anatomy” of the for loop, it’s quite simple - which is what we will be doing in this section. Also, it’s simpler to understand the concept of for loops if we switch out the variable name i with count, which is more descriptive in this case.
for (var count = 1; count <= 5; count++) {
console.log(count);
}
Syntax:
for (counter variable; condition; incrementation of counter variable) {
//code to be executed (also called a statement)
}
First, we declare a counter variable to set a starting point for the looping. You can name this variable whatever you want, and often you will see it being named simply i, which stands for integer.
Then we have a condition which needs to be true in order to execute the statement, which is the code to be executed, for example, a console.log() method. The condition in the code example is count <= 5, which is essentially a shortened version of an if statement.
In order to create a mental image, it’s easier to write the condition out as a full if statement: if(count <= 5) { console.log() }, which translates to if count is less or equal to 5, then proceed.
How about the last part of the for loop, namely, count++;?
During the first iteration, count is equal to 1, which is the value we set when declaring it. The next step is checking if count is less or equal to 5, which it is, which triggers the execution of the statement. What happens after is key to how the for loop works: we increment the value of count by 1. For the next iteration, count is now 2, which is still less than five, so the statement gets executed.
Can you guess what happens when count is equal to 6? The condition we’ve set for the statement to be executed was count <= 5, which will now be false, which results in the ending of the looping.
This video is an introduction to for loops.
Lesson Task
There are practice questions in the master branch of this repo.
There are example answers in the answers branch.
Try the exercises before checking the solutions.