JavaScript Loops

In this lesson, we’re going to be covering JavaScript loops. And loops, what they do is they save us time. So we don’t have to write the same thing over and over again, we can create a loop and a loop will iterate through depending on a condition, and once a condition is met, then the loop will stop. You can also loop through content from the arrays. So I’ll be showing you that in this lesson. As well as there’s various different types of loops. So there’s the more commonly used for loop, there’s also a while loop, and also a do while loop, and there are some subtle differences.

Although overall they are generally the same and they work the same way, there are different times to use them and there are differences between them, which are going to be discussed in this lesson. So we’re looking at the different loop methods and how to output values 0 to 9 using a loop. And in addition, the values that are contained with an array looping through all of those values and outputting them into the console.

So loop saves us some time, and it’s going to apply some of what we’ve learned in the earlier lessons. So first of all, we need a starting point for the loop, and this is where we’re going to use a variable. Assign the variable, our starting value, which in this case is going to be 0 because we want to loop through all of the numbers from 0 to 9 and then output those in the console. And then we also need a condition that’s going to be how we break out of our loop, and in this case, we’re going to wait to see and continue this loop while this condition is true. So that’s x is less than 10.

And then we also need a way to increment x. So we’re incrementing x by 1, so every time the loop loops through, iterates through, we’re going to increment x by 1, and all of this we’re going to output into the console. So we’re going to constantly, as the loop runs, we’re going to output the results into the console. And as you can see, there’s our starting value of 0, and we’re looping through and we know that once x becomes 10, it’s no longer less than 10, so that condition is no longer true and the loop breaks, and then this is what’s providing that increment within the loop.

So we know that that’s where the loop has completed. There’s also a while loop. So this is similar in function, and we also need to set up a starting point for the while loop. So we’re going to use y in this case. And then the loop format is going to loop through while y is less than 10, and then this is what the code that’s going to get run. So we’ll output into the console the value of y.

So there is something missing. So what do you think is missing here? We need a way out of our loop, because if we run it like this, it will continue to loop and the value of y will always be equal to 0, so it’s always going to be less than 10, and this is going to be an infinite loop. So that’s a problem, and as we can see, it’s going to crush our browser. And actually, I just saved it, so more than likely it’s going to crashed the browser, and that’s why we’ve got this error.

And that was a great example of why you always need a way out of the loop, because what happens? Your browser just doesn’t know what to do, it continuously loops through until it eventually becomes unresponsive. So this was the second loop, this was the while loop, and that’s our output for the while loop, and this is the for loop.

So there is one last loop, and this is going to be the do while loop. There is a subtle difference between the do while loop and the while loop, and the format, again, is the same where we have our starting point, and then we’ve got our do, which is what we want to do. And I’m not going to save it quite yet because I know what happened last time. So we’ve just got to make sure that we have a way to get out of our loop and we’re going to increment, and we need to also include a while. And this is where the condition comes in. So we’re looping while z is less than 10.

And notice the structure of this is placing the while after the do. So this is the do while that gets placed here in the bottom that’s running on line 13, and we see the output. And in the end of the data, output is exactly the same, but the structure is slightly different. So we know that with the while loop, it’s going to run, and unless this condition is true, it’s not going to run. So if we have all of these and we set them to 10, the only one that actually runs is going to be this condition here. So this one here is the only one that’s actually running because the do while loop will always run at least one time, because notice the structure of it. The while is at the bottom, and it’s after the do, so it runs this block of code, and then it checks the condition, and it says, oh, well this value is not less than 10, so I’m not going to continue with the loop.

So keep that in mind, that that’s one of the main differences between the while loop and the do while loop is that the condition is afterwards, so it runs at least one time through. I also did say that we’re going to output and loop through an array, so let’s create a quick array of friends again. And let’s say we want to loop through all of the values that are contained within our array. We know for arrays, they do have a length value. So that can be used if we take friends and we get length, we know that it gives us how many items are within that array. So we’ve got a length of 4.

And if we go back to our conditions, if we have a for loop, we can use that to loop through all of the contents of the friends array. So instead of looping through while x is less than 10, we’re going to loop through while it’s less than the length of friends, and we also need to set the starting point back to 0.

So we’re looping through, and we see we’ve got 0, 1, 2, 3. And interestingly enough, these correspond with the index values are the content of the array, and we know that we can return back that content of the array using the index values. So if we want to get those values contained within the array, this is one way to do that using the for loop. So this is commonly used and the common way to do this.

There’s also you can use the while loop as well. So make sure that all you do is you set the condition to the friends length and that’s all you have to change, and then, of course, the output, because all you’re going to get is index values, so if you want the actual values that are contained within the friends array, you need to output them into the console.

So there was another way and actually a shorter way to do this. So taking the friends and using for each– so this is a method within JavaScript, and it uses a function which we are going to cover in more detail later on. So this function is going to give us the ability to run a block code, return back a value, and also value of index, and then we can utilize those within the console. So we can output the value of friend, and you can see that it’s going to output those names into the console.

So you don’t have to use the index, but you can use the index if you want. So this is returning back the index value. So we see that the friend is the name there, the value, and then it’s also including the index value. So this is a shorter format for outputting content contained within the array. It came along with the newer versions of JavaScript. So you’re free to use any one of these to loop through the contents, and there’s going to be more information on how functions work in the upcoming lessons.

So go ahead, try this one out for yourself. Create some loops, create some counts, different numbers, output them into the console, and then use one of the arrays that we used earlier to get the length of the array and output the values that are contained within the array in the console, and then as well, try the for each method in order to output content from an array, and you can be ready to move on to the next lesson.