Loops

[00:00:00]
>> Another thing we're gonna need in order to complete our tasks here, which is loops. So as Alexis from Schitt's Creek says, I've done before, and I can do it again, and JavaScript says the same thing. Loops are how we can get JavaScript to execute the same code multiple times.

[00:00:18]
So earlier we were asking, like how do we, for example, attach a similar event listener to all of the buttons. We're going to do it with loops. Okay, so loops are a way to run the same chunk of code over and over again in JavaScript. And another word for that, that you might run into is iteration.

[00:00:38]
So we are iteratively, we could say, running the same piece of code, the same line of code in this case. So this is a, [LAUGH] I could say traditional, what's called a for loop in JavaScript. And if we run this code. Let's make some space here. If we run this code, what we're gonna to see is the same console.log of now doing rep run over, and over, and over again.

[00:01:14]
Okay, ready, ready to go to the gym? Boom, so what happened I ran, I only typed that console.log, now doing rep once, but it logged to the console ten different times. Like, do you even left bar? Anyway so, [LAUGH] what we've done is we've told JavaScript to run the same line of code over and over and over again without having to type it over and over again, which is great because we're coders, and we hate typing stuff.

[00:01:42]
[LAUGH] So, a traditional for loop like this in JavaScript. It requires us to do three different things within those parentheses. So we've got the keyword for. We've got those parentheses that kind of like define how the loop is gonna run. And then, we have the curly braces which say what's going to run each time this loop runs, so each iteration.

[00:02:06]
And what's happening inside of those parentheses, if you notice they're semicolons, we're telling JavaScript three different things. First, we are declaring and initializing, or kind of assigning, some kind of counter that's going to tell us how many times we've run this loop, or what the value of a certain thing is, for example.

[00:02:27]
Then, we're going to give a condition that JavaScript is gonna check to make sure it should keep running the loop again. So in this case, we have a counter that starts at 0. And we're gonna say JavaScript, keep running this loop as long as the count is less than or equal to an 100.

[00:02:48]
As long as it's less than or equal to 100, keep running, and each time you run, and this is the third thing we're gonna tell it, is we're telling JavaScript how to change. And usually, we're going to increment or add something to a counter. Each time you run, add, in this case, 10, and usually we're adding one to a counter.

[00:03:08]
So in this case, this for loop is going to say, all right, JavaScript start at 0, keep going until you've passed a 100. And each time you run this code to console.log count, after you've run that, add 10 to the counter. So effectively what this does is it's going to, Count by 10s all the way up to 100.

[00:03:39]
In our previous example, with our reps, We had a counter called rep. That we wanted the loop to keep going as long as rep is less than 10. So we notice it doesn't get to the value actually 10 cuz we don't have that less than or equals, and we're adding 1 to the rep each time.

[00:04:05]
Now, I haven't really talked about this plus equals operator here, but any guess what that's doing, plus equals?
>> Increment the value of the counter.
>> Exactly, it increments a value. So let's say I have a dogs, a count of dogs, right now I have zero dogs, I would like a dog.

[00:04:27]
So if I say dogs plus equals 1, this is equivalent to saying dogs equals dogs plus 1. So JavaScript is first going to do the right-hand side, it looks at the current value of dogs, now it's one because I changed it then it's going to add 1 to it and assign that to be the new value.

[00:04:47]
So now, dogs is 2 and + = is a quick way of doing that same thing. Cool. Okay, so we see that + = a lot in our for loops. But you might be thinking, wow, this is complicated. There's a lot of work to do to just like, increase a number by one every time or something like that.

[00:05:08]
So why would have to go and make things so complicated? Like Admiral asked all of those years ago. Well luckily, because we're doing JavaScript in the year 2022, we have options. So we also have another fancier for loop called the for of loop. That lets us more easily iterate over all of the items in a collection, like an array, let's say, or the characters in a string.

[00:05:38]
So for example, if I have an array of numbers and I want to log out each of those numbers from my array. With a traditional for loop, I have to do it real complicated as, US coders and Aval Levine both do not like. I have to declare a counter, in this case, it's an index.

[00:05:56]
It's gonna start at zero. I have to say, keep going as long as the count index is less than the length of the numbers array, cuz that's how we'll know we've reached the end of the array. And this is another fancy little operator, I++ is also incrementing this value.

[00:06:17]
So, this is a another incrementer operator here. And that whole thing we can replace with this nice little pithy for of loop that says for, let number n of the numbers array log the value n. So these are both going to do the same thing, but they're doing it in two different ways, so our for of loop, sorry our traditional for loop.

[00:06:50]
We've got our numbers, and then we're gonna log out. We're gonna iterate over the indices in the numbers array, and then we're gonna use that index to pull out each thing in the array. But because we hate typing stuff, we probably when we're trying to get things out of an array like this, we're probably going to use oops.

[00:07:14]
I'm probably going to use our shorter friend, the for of loop, which is going to say for each item of the array numbers. And we're gonna name that item n, log that item out, and it's gonna do the same thing in way less characters of typing code. Cool.

[00:07:35]
So what we've got here is a, it's called a four of loop. And yes, you sure can. Look it up on MDN and read more about it if you'd like. We're not gonna talk about it, but I just wanna say there's also a for in loop in JavaScript, and it is different.

[00:07:49]
It works differently, and it's Usually not what we're gonna need. So you can look it up on MDN. But just if you've worked in another language where you have a similar construct like this, but it uses the keyword in, just know that in JavaScript, the thing that you probably wanna do is for of, so just saying that as a watch-out.

[00:08:10]
So, we said that we can do this for items in an array. We can also use it for characters in a string. So for example, if I do for (let char of, the string "ALOHA"), and console.log my (char), we're going to get, Each character logged out on its own line.

[00:08:37]
So we said strings are made up of characters, arrays are made up of items, and the for of loop lets us pull out those smaller units that each of these things is made up of. And the way that this works is for loop works because strings and arrays are special types of things that we call iterables in JavaScript, meaning we can iterate over them.

[00:09:03]
They're made up of smaller things that we know how to get out in order. Not everything in JavaScript is iterable and so sometimes if you try a for of loop with some other entity that is not iterable it won't work, or you'll get something unexpected. But suffice it to say that strings, and arrays are things that we're probably going to be working with a lot, and those are both iterable, so we can use them in for loops.