4.3 For Loops

Hello everyone and welcome to this video where we will talk about the for loop. Let's imagine that we want to display Hello everyone on the console 5 times. The way to do this is to make a console.log of Hello, then repeat it five times. This code is a bit ugly, there is a better way to get the same result, and that's where we use loops. In JavaScript, we have different types of loops, and all of these loops essentially do the same thing. They repeat an action multiple times. We have For loops, while loops, do...while loops, For...in loops, and for...of loops. All of these loops do essentially the same thing. But there is a subtle difference between the way they start and end Let's start by looking at the for loop. So back to this code, this is how we write a for loop, so we add parentheses, and here we need 3 statements The first statement we'll call initialExpression. And here we declare an initialized variable So we use let to declare a variable like i and set it to 0 i is the abbreviation of index and it's a common convention to use in for loops. This is what we call the loop variable. So we initialize it to 0, then we end this statement with a semicolon, and the second part of the for loop is what we call a condition. Here, we want to add a condition and compare the value of i with something else. This loop will run as long as this condition has the value true. So if you want this loop to run 5 times, we compare i to 5. So as long as i is less than 5, this loop will run. Again, we end this statement with a semicolon, and then the third part. We'll call it incrementExpression and quite often what we have here is something like this. So, we use the increment operator to increment the value of i with 1. After that for the statement, we can add one or more statements, just like the if statements if you have multiple statements here, you have to put them in the code block. Now here we want to display hello world on the console. So our statement is console. Log of Hello everyone. So instead of repeating this line 5 times, we put it in a for loop, and this loop will run 5 times We save the changes, so that we get 5 Hello everyone messages on the console. So now that you've seen a for loop action, let's see exactly how this loop works. So earlier I told you that this is what we call an initial expression. Here we initialize i to 0 Now this loop will run as long as this condition is true. So, as long as i is less than 5, the instructions we have here will be executed After the first iteration, i is incremented by 1. Then, this condition is evaluated again, so 2 is less than 5, so once again, this loop is executed so we have again the second iteration after the second iteration, i is iterated by 1, so now we are in the third iteration. Again, this condition is evaluated and since it's true, the loop is executed. To show you this in action, I'll output i to the console. We save the changes, this is what we get. So notice that in the first iteration, i is equal to 0, then it is incremented by 1 until it reaches 4. At the end of the 5th iteration, i will equal 4. and when it is incremented by 1, it will be 5 So this condition will evaluate as false. So there are basically two ways to repeat an action several times using the for loop. Let's say we want to repeat something 5 times, we can initialize i to 0 and check if it is less than 5. Alternatively, we can initialize that to 1 and check if it is less than or equal to 5. Now, if you save the changes, you can see that I starts at 1 and ends at 5. Now we can make this programming more interesting. Let's say we want to display the odd numbers between 1 and 5. So, instead of connecting Hello everyone to the console, we can have an if statement and check the remainder of the division of i by 2. So if the remainder of the division of i by 2 is not 0, it means that i is an odd number so we can display it on the console. We save the changes, so here are the odd numbers between one and five. There is also another way to write this loop. Instead, if we start from 1 and continue to 5, we can start from 5 and go back to 1. So, we change the initial expression, and we set i to 5, as long as i is greater than or equal to 1 we now want to increment i. We save the changes and now we get the odd numbers in reverse order. It is more common to use the previous form, so we initialize i to 0 or 1 and increment it at each iteration. But in some cases, you may want to use the for loop in reverse order. That's it for this demonstration on the for loop, let's meet again for the next demonstration where we will talk about the while loop.