And then we use a semicolon to separate the parameters. The second parameter is a condition to check, and if it's true, the loop will continue running. So in this case, how about we say i is less than 10. And the third parameter allows us to update our variable. So how about we increment it using i++. Okay, now we have our curly braces, or our code block, and within here we can do anything we like. And let's just keep it simple. It's console.log, i is, and we'll actually output the value of i here, okay? And let's save that.

So i is now 1, and then once i is 10, 10 is not less than 10. So that's when the loop terminates. So again, whatever is in the loop body is executed until the condition is no longer true. So one common thing that you might do with loops is to list out the contents of an array. So how about we define an array here, say const people equals an array of a few people. So Andre, Bob, and Sally, okay? And how about we just list out the contents of this array using a for loop. So let me just grab all of this, paste it down here. Let's just comment out this loop as well.

So let me just grab all of this, paste it down here. Let's just comment out this loop as well. And we can start at 0 again. But now the condition is going to be i is less than the length of the array. So the length is 3. So we want this to run 3 times. So we can say i is less than people.length. So again, it's going to start at 0, 0 is less than 3, then it's going to go to 1, 1 is also less than 3, 2 is less than 3. But once it gets to 3, 3 is no longer less than 3.

is going to be changing here. So again, start at 0, which is the first item in the array, and so on. So if I say this, we do get all of the contents in the array printed out to our console. And there are other types of loops we can use to list out the contents of an array. But this is a good first example. Let me just comment this out for now. Let's bring back this loop. And I'll just put it down here. And we'll take a look at special statements we can use within the loop. So let's put a comment here and say break and continue.

And we'll take a look at special statements we can use within the loop. So let's put a comment here and say break and continue. So again, this loop prints out zero to nine. So let me run this again. Now what if we wanted to break out of this loop at some point, say, for example, if $i is four, we want to break out of this loop. So we can add an if statement in here. So let's say if $i is equal to four, then we can use the break statement, which we saw in the previous video in switch statements. So now this is going to print out 0, 1, 2, 3.

in the previous video in switch statements. So now this is going to print out 0, 1, 2, 3. And when i is four, this condition is true. So this break will run. And this will break out of the loop and the loop will stop. So if I say that, we get 0, 1, 2, and 3. Now we can also use the continue statement, which is similar, but only breaks out of the current iteration. So let me comment this out. Let's say continue.

So let me comment this out. Let's say continue. So we're going to have $i is 0, 1, 2, 3. When it reaches 4, it's going to say continue. So skip the iteration and go to the next one. So it'll be the same, but $i is 4 will be skipped. And you can see there's no 4 here. Let's take a look at while loops. So down here, let me just scroll up a bit. Let's say while loops.

So down here, let me just scroll up a bit. Let's say while loops. So we can use the while keyword. And within while, we have brackets, and we only specify the condition in here. So let's make a variable named j, and the condition will be j is less than 10. And then we can console.log something similar. So let's grab this. Let's add our curly braces. It's console.log j is j, k. And if you look at the for loop, we're missing two things here.

And let me just get rid of this for now, or comment it out. So again, very similar to a for loop, except we have to manually declare a variable here and also increment our variable here. And you can increment your variable however you like. For example, if we wanted to increment by 2, we can just say j equals j plus 2. And that should start at 0, but go by 2. Also note that sometimes you can get caught in what's called an infinite loop if this condition is always true. So for example, if I didn't increment my variable here, j will start at 0, and 0 is never incremented.

So for example, if I didn't increment my j variable here, j will start at 0, and 0 is never incremented. So this condition will always be true. So it's always going to be 0 is less than 10, and we'll be stuck in an infinite loop. So I don't want to show you that here, because often that leads to the browser crashing. So just note that for your conditions, make sure they are eventually false at some point. Okay, next, let's take a look at a do while loop, very similar to a while loop. So let's just put a comment here, do while loop. The syntax for this is to use the do keyword, and then within here, we can do the work. So again, we'll console.log something similar here.

The syntax for this is to use the do keyword, and then within here, we can do the work. So again, we'll console.log something similar here. We'll use k as a variable. So let's replace this with k. You also have to define this manually. So let's do that above here. So let k equals 0 to start. We also have to increment k here, k plus plus. And then we can say while here, and then the condition. So in this case, k is less than 10, and that should be fine.

And then we can say while here, and then the condition. So in this case, k is less than 10, and that should be fine. So if I save this, actually, let me comment this out as well. So we only get the do while loop, and we get the same thing, except the difference here with a do while loop is this code within the do statement or within the curly braces always runs at least once, regardless of whether or not this condition is true or false. So for example, if I changed k to something greater than 10, say 100, if we were to use a for loop or a while loop, then nothing would happen. But if we use a do while loop, then this will run once, even if this condition is not true. So if I save this, we should see k is 100 just once, and we do.

But if we use a do while loop, then this will run once, even if this condition is not true. So if I save this, we should see $k is 100 just once, and we do. Now I personally rarely use do while loops, but there may be some cases where you actually need them. So just keep that in mind. Next let's take a look at for in loops. So again, I'll put a comment here for in loops, and for in loops are used to loop over the keys of an object. So again, let me just comment this out. So we have a clean slate, let's scroll up a bit, and let's make a person object.

So again, let me just comment this out. So we have a clean slate, let's scroll up a bit, and let's make a person object. So const person equals, and we'll have a firstName, say me, a lastName, say myLastName here, and we'll have a job, let's say, webDeveloper, okay? And let's define our for...in loop, similar to a for loop. So we have the for keyword, and again, we have to define a variable, this time we'll use const, and we'll use x as a variable, can be anything, and then we use the in keyword, and then provide an object. So in this case, our object is our person. So for (const x in person), now x will have access to our person keys.

Now let's take a look at for of loops, which are similar to for in loops. So for of loops, and these loops are used for iterable types like arrays. So again, let me just comment this out. And let's grab our people array, like we have up here. Let me just comment it out up here, so we can use it down here, okay? And it's the same syntax as the for in loop, but we have for of. So let me just paste that in. Let's re-comment it back in. Let's say for const y in people, okay? And now for each iteration, y is going to be each value in the array.

but a bit shorter and more concise than how we did it up here with a for loop over here. So that's one alternate way of looping through an array using for...of, but there are also dedicated functions on arrays that we can use as well. So let's take a look at foreach, foreach, and again, I'll comment this out, but we'll keep the people array. So in this case, foreach is a method on the array object, so we can use it directly on the people array. So people.foreach, and this takes a callback function as a parameter. So let's just define one in here.

So people.forEach, and this takes a callback function as a parameter. So let's just define one in here. So the function itself takes a parameter, and that parameter will be each item in the array. You can name it whatever you like, but I usually name it the singular version of the array. So in this case, the singular version of people is person. So let's say person. I'll use an arrow function here. So let's say fat arrow, and then within the curly braces,

I'll use an arrow function here. So let's say fat arrow, and then within the curly braces, we should have access to this person. So in this case, we'll just keep it simple. Let's console.log the actual person, okay? So let's go ahead and save that, and we should get the same thing as our for of loop, but now we're using foreach. Okay, and we do. If you need access to the index, you can grab that as the second parameter. So after person, let's say comma index, and how about we add that

If you need access to the index, you can grab that as the second parameter. So after person, let's say index, and how about we add that in a template string? So instead of just the person, let's say index is index, and person is the person. So let's add that, and that should work as well. Let's also take a look at the map method, which is similar, but returns a new array. So again, we'll make use of the people array we have already. Let me just comment this out, and let's make one for map.

So again, we'll make use of the people array we have already. Let me just comment this out, and let's make one for map. So say map, and like I said, this returns a new array. So let's save that into a variable. So say const, say peopleMap, and again, it's a method that lives on arrays. So we can say people.map, and this takes in a callback as well, similar to forEach. So we can actually take in the person and the index as well, okay? And we have a function.

So we can actually take in the person and the index as well, okay? And we have a function. Let's add our curly braces, and within here, we can modify the contents of the item if we want to. So in this case, we'll have to return something, and how about we just return the index and then the person? So again, I'll use backticks here. Let's say the index, and we'll put a colon and the person. So now, let's go ahead and console.log people.map, and you'll see our array of people will now have the index in front of it.