JavaScript Loops Made Easy

[Music] in this video we're going to learn about JavaScript loops so I got this question on reddit from blue moon cheese he just doesn't understand loops but he's a visual learner so let me see if I can explain loops and show you how they work there are several different types of loops for four of four in while do-while and high order array functions such as map and for each let's start with the basic for loop so if we wanted to console.log something five times without some sort of a loop we would have to literally write it five times but we can control this much better with a loop so here's the basic construct of a for loop we start with four and then the first part is our initialization so we're going to say let I equal zero the next part is going to be our condition so we'll say as long as I is less than five and then the next part is our final expression and this is where we iterate our counter which is I I plus plus and now in here we can set our console.log and say loop you'll see here that it logged loop five times so let's go over this again here we are initializing a counter basically so I which I generally stands for index we're going to start it at zero we can start it at any number that we would like then in our condition we're gonna say keep going until this condition is false in this last part we're incrementing our counter so in order to see this a little bit better let's add to this our index so we can say plus I and here you'll see loop 0 1 2 3 4 so when it reaches 4 it's going to count up to 5 but then it's going to check the condition and this is and it's going to ask is I less than 5 well 5 is not less than 5 so it did not continue on to fie so again this is going to continuously run until the condition is false instead of incrementing we can also decrement I - - if we did that we would need I to start at a higher number so we could say five we can say as long as I is greater than zero and now it counts backwards five four three two one and then when it hits zero zero is not greater than zero so it does not print loop zero let's change this back to the way that we had it originally incrementing is what you're normally going to see instead of decrementing another thing that we can do is we could break early so we could say if I equals three then break so break we'll just stop and let's see what that does so it started with zero it got to 1 - it printed 3 but then the condition if I equals 3 we want to break or stop so it did not print for another common use for a for loop is to loop through an array so we can add an array here let's say Const names equals we're still going to have it index so we'll start the index at 0 but this time in our condition we're going to say as long as I is less than our array dot length so our array is 4 so as long as I is less than 4 this time we want to print each name in the array and so for our index we will use our counter or our index and we'll just comment this break statement out and let's run this and there we go John Bob Mary and Joe another way of doing this quite a bit easier is by using a for of loop so let's comment this out and this time we'll say for name of names let me clear the console first now we'll console.log name and you'll see the same thing John Bob Mary and Joe so what this is doing is deconstructing the array so it's pulling name out of names so it's taking each value and assigning it to this name variable so we can name this first variable here whatever we want and then after of we have to include the array this way is a lot easier to write and a little bit easier to understand but just so you know it is a slight bit slower than a normal for loop and since we're only executing one line of code within this for statement we actually don't need the curly braces and we could include this all on one line and see that we get the same thing now what if we have an object so let's say that we have a object of user so an object contains key value pairs so we'll say first name and one that'll be John and then last name will be doe all right so how do we loop through this we could use a for loop we could also use a for in loop so here we could say for and then we can create a variable I'm just going to call it key and in user so for key in user it's going to loop through each key so now we can console.log user with the index of key since we only have one line we don't need curly braces again so let's save that actually so we're not getting confused let me comment this one out and now we'll save again and we see John Doe so it's looping through each key first name and then last name and logging the value of each so the first time through would be the same as saying console.log user first name and the second time through it would be the same as saying console.log user last name all right the next loop that we'll look at is the while loop so with the while loop we're going to declare our index outside of the loop so we'll start by saying let I equal 0 and again you can name that whatever you like and we'll say while I is less than 10 we want to console.log and we'll just console.log I and then here's the important part we have to increment I within the loop so we can say I plus equals 1 or an easier way to write this is just I plus plus and that is going to increment I until this condition is false so when I is equal to or greater than 10 it's going to stop if we didn't increment I then this would become an infinite loop and that would lock up your browser all right so I'll save this and you'll see 0 through 9 as soon as it hits 10 10 is not less than 10 so it's not going to print 10 again within while we also have the break condition so we could say if I equals 5 break and there we go there is also a continue condition so to use continue we want to make sure that we're incrementing before the continue otherwise we could again create an infinite loop so let's say if I equals 5 we're gonna continue but let's bring our console.log down to the bottom so let's see what happens we'll just save this alright so now we have 1 2 3 4 no 5 so what's happening here is we're incrementing I and we're saying if I is equal to 5 continue so it's own it's like a break we're gonna stop this loop but we're gonna continue on to the next loop so break stops completely continue stops the current loop and continues to the next loop the next loop that we'll look at is the do-while loop so it's very similar to the while loop this time we're going to say do and we'll just move all of this stuff up here into the do statement and then while I is less than 10 so if I save this you'll see that it looks pretty much the same we're going to do all of this stuff here while I is less than 10 the difference here is that the do statement will always run the first time it checks for the condition after the do statement has run so if we say while I is less than 0 and we save this you'll see that it does print 1 even though one is not less than 0 so it ran this block of code and then it checked and since the statement was false it didn't run the code again all right the last loop that we're going to look at is a high order array function and the one that we're going to look at is the for each high order array function when it comes to looping through arrays before each function is what I always use so let's go ahead and create another array quickly so what we can do here is we can say animals dot for each and then we will use an arrow function so we'll just say V for variable we can name that whatever we want we could say we could say animal if we want and then we're just going to console.log animal alright we'll save that cat dog horse sheep and bird pretty simple that's going to be it for this video if you made it to the end thanks for watching but before you go if you liked this video a thumbs up is appreciated I upload new content every week so hit subscribed in the belt to get notified if my videos have helped you in any way and you have the means to do so support me on patreon I'm also on Twitter and Instagram at code stacker thanks for watching

Channel: codeSTACKr

Views: 78,818

Keywords: for loops, nested, iteration, iterate, loops in javascript, loops in js, javascript loops, js loops, all loops in javascript, all loops in js, javascript loop, what are loops in javascript, different loops in javascript, loop types in javascript, javascript loop through array, javascript loops explained, javascript loop through string, javascript loop over object, javascript loop object, javascript, for loops in javascript, learn for loops javascript, for loops tutorial

Id: Kn06785pkJg

Length: 10min 52sec (652 seconds)

Published: Wed Nov 20 2019

Reddit Comments

[u/codeSTACKr]

In this video we'll learn about all of the different types of loops in JavaScript. Loops are a way of repeating things in JavaScript. We'll cover FOR, FOR..IN, FOR..OF, WHILE, DO..WHILE, and the high order array function forEach. I will do my best to make JavaScript loops simple and easy.

Hope this helps at least 1 person! Don't forget to SUBSCRIBE. Thank you for your support!!

[u/Robo-Bobo]

Thanks! I was just about to look up forEach loops, and bam! A good example right there