Lesson Description
The "While Loops" Lesson is part of the full, Getting Started with JavaScript, v3 course featured in this preview video. Here's what you'd learn in this lesson:
Kyle explains the concept of while loops in JavaScript, highlighting that while loops run until a specified condition becomes false, making them suitable for situations where the number of iterations is unknown. He contrasts while loops with for loops, emphasizing that while loops are preferred for scenarios like user input handling or nested data structures where the endpoint is uncertain. Kyle also briefly mentions the less commonly used do while loop, which always executes the loop code at least once before checking the condition.
Transcript from the "While Loops" Lesson
[00:00:00]
>> WebDevSimplified: Now just like in JavaScript, how we have multiple ways to do everything, we also have multiple different ways to do looping, and this first one is going to be while loops. While loops are very similar to for loops, but instead of having a set endpoint and a start point, instead they just run until the value becomes false. So here's a basic while loop. Let's just write out the syntax ourselves. We can say while, so just like for, we put the word while here instead, and we have our set of parentheses, and we have our set of curly braces where all of our different code is going to go.
[00:00:27]
The difference though is that a while loop only takes one single value in it instead of multiple like a for loop. So here we could set a value for checking something. Let's say i is less than 5. Well, first of all, we need to now define this new i variable because it doesn't exist yet. So up here we can say let i equals 0, and also if we were to just run this code as is, this will give us an infinite loop because we're never updating i.
[00:00:48]
So usually at the end of your while loop, you also need to update your i variable. So now if we just console.log i, make sure I get all that correct. There we go. You can see we're logging 01234. This works essentially the same as a for loop, and it's kind of got the same parts. You can see here's our initialization part that goes beforehand. Here's our updated part that goes at the end, and here's the check that we have in the middle.
[00:01:11]
So anything you can do with a for loop, you can also do with a while loop. They're entirely interchangeable. You just may want one over the other depending on what type of situation you're inside of. So if we want to convert a for loop to a while loop, like I said, we essentially take this let i equals 0 part, put that before your while loop. You take this second section, and that's the only thing that goes inside your while loop, and then finally your updater section goes at the very end of your loop.
[00:01:38]
So why would you want to use a while loop over a for loop since essentially they do the same thing? The main reason is you'd want to use a while loop when you don't know how many times you're going to loop through something. A for loop is great when you know exactly how many iterations. Like we want to iterate 5 times through this loop, but what happens if you don't know how many times your loop is going to run?
[00:01:56]
For example, this code right here has a user input variable, and we are prompting the user, just imagine this function, ask the user to type something in. They can type in any command they want and we'll do something in our code, but if they type the word quit, then we want to exit out of our code. So essentially we're using a while loop here. We're just constantly looping until they enter the word quit, and then we are going to quit them out of the program.
[00:02:17]
So this while loop could run 1 time, it could run 100 times, it could run a million times. We're not really sure, so we're able to use a while loop since we're not sure where the endpoint of our data is. Same thing here with nested data. I don't know how nested our data is. For example, I have a person and that person can have a friend, which is just another person that can also have a friend, which is another person that could have a friend, and so on and so on.
[00:02:38]
I don't know if this person has one friend or if they have 100 different levels of friends going on here. I don't actually know that information, so while loop is great here because now I can check to see, OK, this person, do they have a friend? If so, get that information and then get the next person. So the code that we're doing here is a little bit confusing to look at, but essentially our person is just set to this variable right here to start.
[00:03:00]
We're then checking, does this person have a friend? If they have a friend, we're going to run the code inside of here, and all that does is update our person to whatever the new person friend is. So in our case it'll update them to Joe, that's the person's first friend. It'll log out that friend's name and then it'll start my while loop again and now it says, Hey, does Joe have a friend? Well, in our case, Joe does have a friend of Sally, so we run our code, update the current person to Sally, print out Sally's name, and then we check, does Sally have any friends?
[00:03:27]
Unfortunately, Sally doesn't have any friends, very sad. So we exit out of our while loop and then we can just render out whatever that final friend's name is or whatever else our code does. So really the only time you'd want to use a while loop is when you don't know how many iterations your loop is going to go through. This is why by default, I pretty much use for loops for any looping related stuff I do, and while loops are specifically there when you have this nested style of structure or an unknown number of iterations.
[00:03:53]
Just like with for loops, you can use break and continue inside a while loop, they work exactly the same, so that's really nice. There's also an alternative of a while loop called the do while loop, which I'm going to be completely honest, you'll probably never actually use inside your code, but the difference between a while loop and a do while loop is that a do while loop will always execute the code in your loop one single time, and the syntax for this is slightly confusing.
[00:04:17]
So we'll take a quick look at an example here. First of all, we say the keyword do, followed by some curly braces, and then we put our code. For example, we can just say console.log. In loop, whatever, it doesn't really matter what our code inside of here does. And then after that we put the word while followed by whatever the check is that we want to do. So for example, like i less than 5 is going to be the check that we want to do.
[00:04:39]
In here we can update i each individual time and then we can say let i equals 0. When I run this code, you can see it prints out in loop 5 separate times. But what happens if my i variable is, for example, 10? It's already greater than 5. So now when I save, you'll notice it actually prints out this logic one time. And that's the difference between a normal while loop and a do while loop. Do while will always run the loop portion first before it does the check to see if it should continue running.
[00:05:05]
So essentially it does the check at the end of your loop instead of at the start of your loop. While a normal while loop, if we just convert this to a normal while loop, you'll see when I run this, it actually prints nothing because it first does this check before it runs the code in my loop. This is why you often won't see these do while loops, because you usually want to do your check before the loop and not after it.
Learn Straight from the Experts Who Shape the Modern Web
- 250+In-depth Courses
- Industry Leading Experts
- 24Learning Paths
- Live Interactive Workshops