4.3 The For Loop

Hi folks, in this lesson we're going to take a look at the for Loop. In programming a Loop is used to execute a block of statements numerous times, each time with a different value. JavaScript has a number of different types of Loop, the while and do while Loops, and the for, for in, and for of Loops. In this lesson, let's focus on the for loop. The for loop is probably the most frequently used type of loop in JavaScript. This loop is useful for iterating through the items in an array. With the for loop, we use the reserved word for, followed by three expressions inside parentheses, followed by a block of statements within curly braces. So for this example, let's say we have an array containing three elements. We can loop through this array using a for loop, and do something with each of the elements in the array. So let's look at the syntax in more detail. We start out with the for keyword. We then have three expressions within parenthesis. And this is followed by a block containing one or more expressions. Let's look at the three expressions within the parenthesis. The first expression, highlighted here, sets a counter variable through the loop. The second expression checks that the counter variable is less than the length of the array and the last expression increments the counter variable by one, so the first expression will be evaluated the first time the loop is run. But the second and third expressions will be evaluated on each iteration of the loop. In this case, the array has three elements, so the loop will be executed three times. Inside the block for the look we can get each item in the array using square bracket notation in conjunction with the counter variable x. So if we look at this in a browser now, we should see three different log messages containing each element from the array. And I’ve used the wrong identifier in the second expression. Let’s just fix that. And it should now work as expected. So this is the most basic form of loop and it’s been a part of JavaScript for a very long time. We can actually improve on how this loop performs quite easily by adding another variable to the first expression and making a minor change to the second expression. So we've only made a small change here, but what we've done is change the first expression, which is only evaluated once, to include a variable that contains the length of the array. Then in the second expression we can just compare the two variables. Remember that I said the first expression is only evaluated once, the first time the loop runs. So we aren't checking the length of the array on every single iteration now, only on the first iteration of the loop. All three of the conditions in the parenthesis, following the for keyword, are optional. We just need to provide the separators if we want to omit any of them. We can even omit all three if we like. So in this case, we didn't provide any expressions within parenthesis, we just provided the separators. This means that we have to do the check, that we're not going over the length of the array inside the body of the for loop. And it means we need to do the increment ourselves at the end of the loop. This will work in exactly the same way as the first for loop. Once again, I've made a slight mistake, and I've treated an array like a function and used parenthesis instead of square brackets, let me just fix that. So this time we see the same three log messages as the first loop showed. So this is valid JavaScript syntax and you might see for loops that look like this, but generally it's best to stay away from this second format. And the reason for that is because in the first for loop the x variable, which we declared with let, is scoped to the for loop block and is not visible outside of the block. Whereas in the second form, the x variable is defined outside of the for loop. And so it's visible both within the block of the for loop and outside of it. We also have to do this length check ourselves using if statements, and manually break inside the body of the for loop, which will stop the loop from executing. So really we lose the benefits of block scoping in second formats, and there is a bit more code that we have to write ourselves. So generally the first format is preferred. So in this lesson we looked at the for loop, which we learned is specifically for iterating over arrays. Be aware that the bigger and more complex a loop is, the slower it will run. In the next lesson we'll move on to look at the for in loop. Thanks for watching.