For Loop
We will start by showcasing a sample of for loops. loops in general is a way for use to repetitively repeat a chunk of code more then one time. we bind that for loop and give it the amount of times we would like to duplicate the code. In this sample we explore and understand the basic ways to use with loops.
Video Transcript
00:01All right, so let's start our next big and last topic,
00:04which are loops.
00:05Loops, and let's just jump right in.
00:07We'll see it first in how we work with it,
00:10and then we'll see it in action.
00:11So we'll start off by starting up a new file,
00:14and I saved it already in the JS folder
00:16called 06-loops.js.
00:19And I wanna start with just showing you
00:21the syntax of a loop.
00:22And first of all, what is a loop?
00:23A loop enables us to take a chunk of code
00:27and basically ask of JavaScript
00:30or any programming language to take that code
00:33and repetitively do that code over and over and over.
00:37So let me show you an example.
00:38So let's say I'm gonna create a variable
00:40and I'm just gonna call this output.
00:42And the output value will equal nothing.
00:45It'll be an empty string at first.
00:47And then I'm gonna create a loop
00:48which is called a for loop.
00:50And the for loop has basically three structures,
00:52three things that we need to give it
00:53that we separate them with a semicolon.
00:56And the first part, what we wanna put here,
00:59we wanna put here our initiation variable,
01:03which basically means that we're gonna put here
01:04a new variable and we're gonna call it i
01:06and we're gonna say that i equals zero.
01:09So when our loop will start,
01:10it will reset the value of i and set it to be zero.
01:14We then follow up with our condition
01:15and we've met quite a lot of condition.
01:18So let's say we wanna make sure that we continue this
01:20as long as our i is smaller than 10,
01:22which means it will progress
01:25all the way from i equals zero to i equal 10.
01:29Now the question is of how big will those steps be?
01:32To modify that step, we will start off with i plus plus.
01:37And i plus plus basically means take the value
01:40and add one to it.
01:44In other words, it was zero, it will be then one
01:46and then two and then three and then four
01:49and then five and then six and then seven
01:52then eight, then nine, then 10.
01:53All right, so it will basically just run through
01:56all those different options
01:58and then continue adding those values.
01:59So what I'm gonna do, I'm just gonna end that loop
02:02and notice that I opened up a curly bracket
02:04and I close the curly bracket
02:05saying that you should be very familiar with at this stage.
02:07We've been using a lot of curly brackets.
02:10Anything within these boundaries of those curly brackets
02:13is gonna be part of this for loop.
02:15Now, what do I wanna put inside of this for loop?
02:18We're gonna start off with,
02:19I'm just gonna update my output
02:21and I'm gonna add into the output
02:23and the way I add into the output
02:25is a very trick, a very fun way of doing it, plus equals.
02:29That will take my output the way it was
02:31and just append to the end of it whatever value I put in.
02:34And I'm just gonna add in the value of maybe space plus i,
02:39making sure that there's always a space before our value.
02:43Or maybe it would work better
02:45if we put the value of i plus a space,
02:49which I could, I use a, or, oh,
02:54and this goes back again,
02:55if you don't use a one comma or a double quotation,
03:00one quotation or two quotations to put inside of your value.
03:03But what I'm doing is I'm adding into one a string
03:06and I'm concatenating it with another string,
03:09which is basically converting my integer into a string.
03:11It's converting my number into a string
03:14and adding it into the output.
03:16And now all that's left for me to do
03:17is maybe create here a small alert
03:19and then see what comes back in my output.
03:22Now, what I'm expecting to see is zero space one,
03:27space one, space two, space three, space four,
03:31until it reaches nine.
03:33Because only when i is smaller than 10,
03:36it will be able to trigger.
03:38As soon as we get to that place where i equals 10,
03:41then it will leave our for loop
03:43and our for loop should terminate.
03:45So let's run our example again for a second,
03:48just see if we're getting that.
03:49And we are, we're getting one, two, three, four, five,
03:51six, seven, eight, nine,
03:53which is exactly what we would hope to get.
03:55Now, let's talk a little bit more about this.
03:57So first of all, we've seen the variable, we set it to zero.
03:59Did we have to set it to zero?
04:01No, we could set it also to five if we wanted to.
04:04If I set it to five and I run my application again,
04:06it's gonna start from five and end at our highest amount.
04:10Now, did we have to complete it at 10?
04:13No, we could have completed it also
04:14in any number that we wanted.
04:15Maybe we wanted to actually be smaller or equal to 10
04:19because we wanted to capture 10 as well.
04:22And there we go, and we added also smaller or equal to 10.
04:25Did we have to have our i grow by one each time?
04:28No, if we wanted to, we could have done plus equals two,
04:31making our variable go up by two.
04:33If we wanted to, we could have put anything we wanted
04:35into the third parameter of our for loop.
04:38If I run this again, now we'll see
04:39that it's gonna skip one each time,
04:41starting from five, then seven, then nine.
04:43And then when it reaches 11,
04:45because 10 doesn't exist anymore,
04:4610 is greater than, 11 is greater than 10,
04:49thus it's gonna leave and terminate our for loop.
04:53The idea of for loops in a nutshell is really
04:55to enable us to take a large amount of code
04:58and repetitively go through it and run through it.
05:02Now, there's a lot of different types of loops,
05:05but all the different types of loops
05:06practically do the same thing with a few limitations.
05:09So let me just talk about a few other variations
05:13and a few other options with our for loop.
05:15So we saw the for loop in its basic standard format.
05:18Did we have to set it up where our variable
05:21is set inside of the for loop?
05:22No, if we wanted to,
05:23it could have been also set before that.
05:25It really is the same thing.
05:27You would only have to put an empty semicolon,
05:30an empty content before the semicolon.
05:32So JavaScript would know to skip that definition
05:35and move on that the second definition
05:37and all the rest would be the same.
05:39So if we refresh this again,
05:40everything should continue working.
05:43The valleys don't have to go up as well.
05:45If we wanted to, we could have had it go down.
05:47So our example is starting to get more and more complex
05:50for our for loop.
05:52Really traditionally, and let me just comment this out.
05:54Traditionally, when we would create a for loop,
05:57we really would try to stick to the standard.
05:59Sometimes you wouldn't,
06:00but you would figure that out as you become,
06:03as you're building more advanced applications
06:05that demand you to have those capabilities
06:07and to have those features.
06:09It's one of those stuff that you don't wanna overextend
06:11yourself with for loops
06:12unless you're already ready for them.
06:16So one of the stuff that I wanted to talk about
06:17is it's really important to start from zero mainly
06:20because when you work with arrays,
06:21and let me just show you that.
06:22If we create a quick array,
06:24and I'm just gonna call it A for array,
06:26and I'm just gonna put here different things
06:28such as Ben, Bell, John, James,
06:40what else?
06:42Narf, which is one of my favorite copies.
06:46We have our array here.
06:48Now arrays have a property which is of length,
06:50so we could go to our A.length,
06:53and we could set our A.length as the values
06:56and progress throughout.
06:58Now when we put our output,
07:00I could actually go into my output
07:02and instead of assigning a random value,
07:05I could assign the value that's within our A condition.
07:07So for example, let's say we're gonna add here
07:09A in position I, which is position zero,
07:14one, two, three, four,
07:16and we're gonna add here maybe also a comma.
07:20If we run our application again,
07:21we should be getting Ben, Bell, John, James, and Narf
07:24all separated with a comma.
07:29And there we go.
07:30Now obviously, in a real scenario,
07:32we probably wouldn't want our last element
07:34to have that amount as well,
07:35so how would we fix that?
07:37One thing that we could do
07:38is we could do it one less than our length.
07:41By doing it one less than our length,
07:43we're gonna get everything but Narf.
07:45If we check this out,
07:46we're gonna get everything but Narf.
07:47And then we could go after our for loop is completed
07:50and we could add into our output, also Narf.
07:53And Narf would actually be now position AI.
07:59Now if you're wondering why would it be position AI?
08:01Because basically, for this condition not to meet
08:05means that we already reached this value.
08:08If we reach this value,
08:09that's the only reason why we're out of the loop.
08:11Thus, our I had to progress at least one more
08:14than what our for loop did,
08:16so we don't have to update that again.
08:18So if we run our application now,
08:21we'll see that Narf has been added into the mix as well.
08:24So this is really a nutshell, really quick run
08:27of how for loops run.
08:29I wanna show you just one more thing regarding for loops
08:32and that's the capability of cycling
08:34through an array directly or an object directly.
08:38So to do that, I just wanna show you that in action.
08:40So I'm just gonna comment that out.
08:43So we're gonna run through our array in motion
08:46and to do that, what I'm gonna do is actually,
08:48let's create here a quick little array
08:51and we're gonna call this maybe var A2
08:54and we're gonna put inside of a number.
08:55So I'm gonna put here two, three, 10, four, six, 100.