For Each Loops | Javascript | Tutorial 26

hey welcome to draft Academy my name is Mike in this tutorial I want to talk to you guys about using the for each loop in JavaScript now a for each loop is basically a special type of for loop that we can use with arrays and JavaScript to loop through the elements inside of those arrays so normally if we were just gonna loop through the elements inside of an array we could use a for loop so down here I just have this for loop and you can see it basically just says for there I is equal to 0 I is less than friends dot length I plus plus and then up here I have this friends array and it has 3 elements inside of it with just different names and down here I'm just writing out document out write friends and I'm passing in this eye as the index so over here on the website you'll see I'm printing out all of the elements inside of this array here's the thing though looping through the elements in an array is such a common task in JavaScript that there's actually a special function that we can use call it a for each and basically what it'll allow us to do is loop through all the elements inside of an array really easy so instead of having to write out this whole for loop we can basically just write a for each loop and it'll make it a lot easier to loop through the elements in the array so let's create a for each loop the first thing we want to do is say friends and I just want to say the name of the array that I want to loop through and then I'm gonna say dot for each and this is actually a function that we can call so I'm gonna call it just like I would call a normal function with an open and closed parentheses now inside of here I want to put another function and this is basically a function that's gonna get called for every single element inside of the array so let me say that again for every single element in this friend's array we're gonna call the function that I put inside of these parentheses and I'm just gonna create a function inside of here so we can just say function and I don't need to give this a name I can just make an open or close parenthesis and an open curly braket so this function that we write in here and all the code that we put inside of these curly brackets is gonna get executed for every single element in the array so I'm just gonna click enter here and now we can write any code in here that we want to write for each element the array so I could just say like document right and basically I can just print out like element so now over here and actually let me put a break in here so now over here on my web browser when I run this program you'll see it prints out element three times so for every single element inside of this an array it's gonna perform this function down here so it's going to basically just print out element onto the screen and so that's really cool right I can do something for every element in the array but what if I want to access the element in the array that I'm currently looping through right if you're looping through the elements in the array chances are you're gonna want to do something with them like print them out or modify them or you know do something else with them and in order to get access to the individual element that we're currently looping through I can actually pass a parameter into this function so over here I can say element and then down here I can actually print out the element inside of the array by accessing that parameter so I have element up here and this is basically gonna pass into this function the current element that we're looping through then down here we can access it so I'm gonna run this program and now you'll see instead of just printing out element we're printing out the individual elements inside of the array so I could really call this whatever I want it doesn't have to be called element you can name it something else but elements usually like a good name just because that's exactly what it is it's the element inside it here but if I wanted for example I'm looping through an array of friends so it might be better for me to call this friend and basically what this is saying is for each friend inside of the friends array I want to access the individual friend so sometimes it's better to name these it's like that so that's the basics of a for each loop and these can be really powerful so over here I have another little variable setup and this is actually an array of objects so if I expand this here you'll see that we have this big array and the first element in the array is an object and the second element in the array is an object and these are both books so this is an array of books you can see over here we have this Harry Potter book and the authors JK Rowling and the pages are 300 and then we have green eggs and ham authors dr. Seuss and there's 25 pages so I basically have an array of different books and I could use this for each function to easily loop through all those books so we could say set of friends books and we can say for each book I want to do something so I could actually print out like different attributes of the book so I could say like book dot author and for each of the books this is gonna print out the author of the book so we get JK Rowling we get dr. Seuss I can also print out like another attribute so we could say like book dot title and actually we can put another break sign here so now I'll actually be printing out information for both of these books so we have Harry Potter the author JK Rowling green eggs and ham the authors dr. Seuss so you know basically these for each loops do exactly what a normal four loop would do but they just make it a lot easier so I would definitely recommend using these whenever you're trying to loop through the elements in an array it's a lot simpler and it's just a lot cleaner so it's a lot easier to kind of visualize what's going on hey thanks for watching if you enjoyed the video please leave a like and subscribe to drop Academy to be the first to know when we release new content also we're always looking to improve so if you have any constructive criticism or questions or anything leave a comment below finally if you're enjoying chopped Academy and you want to help us grow head over to draft Kadim EECOM forward slash contribute and invest in our future

Channel: Mike Dane

Views: 26,261

Rating: 4.9763312 out of 5

Keywords: Programming

Id: Au7JCqkVq9M

Length: 6min 35sec (395 seconds)

Published: Sat Oct 21 2017