JavaScript - Advanced For Loops (for..in and for..of)

okay in this video we're going to continue with the idea of uh programmatic flow or flow control this has to do with the idea that the instructions or the code or the statements that we type in a computer program are executed in a particular order that order usually starts at the top of the file and each line of the file is executed one at a time and each instruction at that line is executed so with flow control we can change the flow of the program for example we talked about conditional statements the if statement allows us to change the flow of the program if a condition is true execute a block of logic otherwise execute a different block of logic right we also talked about loops loops allow us to execute a block of logic uh repeatedly until a condition becomes false all right so you test for a condition and if it's true you execute the block all right so uh we're going to get into a little bit more advanced types of loops with javascript one of the things you do most in computer science especially with web technology is iterating over the items in a collection okay so what do we mean when we say a collection well there are a lot of things that are considered a collection so a simple string is a collection it's a collection of individual characters right so if we have a simple string like this i might want to iterate over this so to iterate means to basically go one item at a time and do something specific with with those items right to iterate one thing at a time so with a classic while loop we can do this and we could say let i equal zero while i is less than mystring.length and i need to put parentheses around our boolean expression so this is the boolean expression that we're testing if this is true the loop will run and then it'll test the condition again and if it's true it'll run and then it'll test the condition again so as long as the i value is less than the length of my string i'm going to console.log and we're going to print out we're going to use string interpolation here which is the back ticks and you say the letter is and we'll put quotes here and then do our special dollar sign curly brace syntax and then we're going in here we put a javascript expression and it gets injected so we want the character in my string at index i and then here i plus plus okay so this is the classic while loop and we can run this and this should just iterate one character at a time through our string right so this is the classic while loop now i can run this node and the name of this file is advanced four because eventually we're gonna get to the advanced for loops okay so we see we do something with each item in the list alright we can do that with with a for loop as well and i'll just separate these with console.logs so that way it's easy to see what's going on and don't forget your semicolon all right so a classic for loop we're going to iterate over this the same way right so we'll say um four we have our left and right parenthesis let i equal zero that's the um initial uh initializer right just like in the while loop then we have our condition which is in the middle the boolean expression so while i is less than my string dot length and then what do we do at the end of every iteration of the loop so we we add one to i i plus plus another classic for loop and we'll see the console.log actually we just want this thing this is the exact thing that we want so i'm going to copy and paste that so the classic while loop and then the classic for loop all right but there are additional for loops that we can use there are two different for loops other than this classic form we have a four in and four of okay so the four of has to do with anything that has a particular order and that's how we can remember that for of means for each item of something that's ordered okay so what is ordered well strings are ordered we can't just print these letters out in any particular order otherwise this wouldn't be the word hello right so order is incredibly important for strings so it matters right the first character has to be in the first position the second character has to be in the second position that's order right so for things that are ordered um and also lists or arrays rather are ordered okay so we're going to do a console.log and sort of print out just for our output so we can tell see this kind of breaks up our output a little bit for of and that's for things that are ordered and again you can remember oops the the ordered part because it's the of 4 of so what we can say here is 4 and we have our parentheses again we have variable let character of our string my string okay so in this way character becomes is a variable that we're defining here with let but each time through the loop the character is one of the items in my string because my string is a collection so we're iter iterating over collections here a string is a collection of individual characters an array is a collection of whatever you make your elements right it's it's it's one value that's actually a collection of values right so when we talk about an expression evaluating down to one value it can evaluate down to one array but the array can reference multiple other values okay so here uh a string is one value it's it's one thing but it's it contains a collection of other things all right so for this for loop chr is a variable we're defining and it's going to be each one of these individual characters just like we iterated with the while loop just like with the classic for loop okay so here we can grab this line and it's going to be slightly different okay instead of we don't have any um i value here we don't have any index right so with these two approaches we use the index and we increment the index and then we use that index to access the item on the string so here we don't have that we just have the character directly we don't have to access anything with an index in fact we don't even have an index so a four of statement would be good if you're iterating over a string or a list and you do not need the index now sometimes you will need the index for other things okay but in this case for what we're doing here we don't need the index so we can just use a 4 of and this is a cleaner cleaner syntax there's less to keep track of i don't have i equals 0 i don't have i plus plus i don't have to check for the length of the string that all happens automatically and i don't have to reference by index right so this is a much cleaner form to just iterate through a list anything that's ordered iterate through an array or a string now objects aren't necessarily ordered okay so this uh does not work for objects so this is strings arrays anything that's ordered okay so remember the o means ordered so the letter is chr so we can run this and we see the same thing right but this is a cleaner syntax now we can do this exact same thing with a list right and let's just copy and paste here this entire block of code all right now instead of my string we're going to do find and replace this should you should get used to being able to use your editor tools okay we're going to find and replace we're going to change this to my array and we're going to change the value here to be an array and we're going to see if all of this stuff works the same okay so control f on atom this will locate all of the instances of my string and we want to change that to my array all right i click up here because that's where i want to start and it'll start searching down so i click find and replace replace replace replace replace replace okay now we don't want to replace the one at the top and jump back to the top of the document okay so here we have my array that's good um we want to change this to an array now we do have an error here because we already defined this variable i up here we we declared it okay so you can't declare a variable twice so we have an issue here with this variable i right i has already been declared so to fix that all we have to do is just delete the declaration and then just set a value on it okay so here is arrays my array and maybe we'll say something like this arrays and then up here we'll call this strings okay and these are just visual indicators in our output to help us see what's going on otherwise it would just be sort of a jumbled mess all right so i have my array and what are the items that i want to put into an array well things that might it might matter to have a particular order with would be like quiz scores for example so on quiz 1 you know you might get 92.3 quiz 2 might be a little bit harder and you have an 87.6 quiz 3 might be even harder and you get 79 and then you study really hard quiz 4 is even harder but you you work hard and so you get a 98. all right something like this so here the the order matters right this quiz score is associated with quiz 1. this quiz score is associated with quiz 2. if you jumble them up you don't know which quiz sort score is associated with which quiz okay so the ordered matters here there's no other way to tell which is associated with which except the index number right with an object however you would have a key and i could label this if we had the same thing let my object something like this we could just say quiz 1 and then call this one 92.3 right and quiz 2 87.6 right and so in this way the order doesn't matter because you can reference it by the key so i could switch these around it doesn't matter but i still know which ones associated with quiz 2 and quiz 1 and so i could put quiz 4 here and the order no longer matters because 98.6 because i can reference the items by the key all right and this would be quiz quiz 3 all right and 79.8 okay so this object version has keys and so objects in javascript the order does not matter and also uh it's important that you know that there's no guarantee that order of an object is preserved so just because you define an object and the keys in a particular order there is no guarantee in javascript that they will remain in that order okay so that's also important arrays are guaranteed to remain in the order that you set them they're ordered by their index value okay so very important objects are not guaranteed object keys are not guaranteed to be in a particular order all right now in most uh most javascript implementations they go ahead and do maintain the object keys in the order that they were added okay but it's not technically part of the specification and if you want to be absolutely sure you never assume that they can be so if you were to test this you can test this a whole lot of different ways and the object keys normally are in the order that you uh you assign them but in the actual javascript specification there's no guarantee so be careful with this uh the order whenever you have to have something that is in a particular order make sure you use an array uh objects should be more or less key value stores and the order does not matter all right so we're going to ignore this my object here for a second we're going to bounce back to it because we want we want to talk about arrays and so we replaced my string with my array and now we have an array here and instead of the letter is we're going to put the score is so we can do find and replace again so instead of letter i'm going to say quiz score so i'm going to replace replace replace all right then we jump back to the top all right so here we go arrays classic while loop the quiz score is and then classic for loop and then here is what the important part is we have a four of loop so instead of character this is going to be quiz quiz score okay so be careful when you're copying pasting i just did this to show showcase the find and replace but you have to make sure you change every element of it right so we had to change not only the variable name but we also had to change the text that needed to be quiz score instead of letter because it's not letters anymore and then also character didn't make any sense okay so copying and pasting can be useful just be careful because you do have to go through and make sure everything makes sense right all right so we'll save that and we'll run this so here classic while loop we have 92 87 79 98 92 87 79 98 okay so this we see that this is working in an ordered fashion just like with strings now we can do this with with objects okay so here is objects and let's see um let me copy and paste that whole thing okay so this whole section is just the arrays now we're going to go down to objects and remember objects are not guaranteed to be in a particular order okay so how can i iterate over an object okay well there's a few different ways we can we can do this okay so i can have an array called uh keys and objects is a global um it's attached to the global object and it's basically um an object that contains uh different methods that allow you to um deal with objects it's also the constructor for a generic object in javascript which we'll get into constructors and prototypes and that sort of thing later but for now object just think of it as a global keyword that has special functions special methods attached to it and you can pass in an object and it'll give you certain results so for example object.keys will return an array of the keys if you pass it an object so my object so this is an array of keys so that will be these items object there we go and so we can test that console.log keys okay now notice they do happen to be in the order that we set them right but they um we might later do something with this array and mix it around but it doesn't matter because this is a key value store if i want to access one of the items in the object i just put in the key i don't have to know what order it's in right so similar we we can make an array similarly we can make an array of values there we go and console.log values values run this and here we get an array of the values now that these things are in two separate arrays it's important the order matters because the item at index 2 here is associated with the item at index 2. right so if we were to switch around the order here if we were to shuffle this list up there would be no guarantee that this item is associated with that item and this item is associated with that item right so an object is basically a list of keys and a list of values that's another way to represent it anyway a list of keys and a list of values and their indices match up right so index 0 index 0 index 1 index 1. and you could have lots of different lists like this where the indices match up right so once we've separated them into into lists we have to be sure not to sort them or change their order if we want to maintain that that property such that the order the index value of a particular item in this list matches the index value of a particular item in this list now with objects one of the things you might want to do is sort your your list um you know alphabetically or something by key so you might want to sort by uh the number of or the score the highest score to the lowest score and that sort of thing so generally speaking you're going to want to convert that to an array if it's the keys or the values right and then shuffle up like perform whatever um algorithm you want on the array so if this is alphabetizing or if you want them in their particular order quiz 1 quiz 2 and quiz 3 you would order this list and then you can get the values just by plugging in the key right so also besides doing this like if we have array.keys um let's do something like this all right and then we'll also do that down here so console.log actually let's do our for loop so once we have an array we have order right we have something that's ordered so we can use [Music] the for of loop all right so four of because it's ordered so we could use this for of loop here for let key of my array console.log key i'm going to log out the key and then also log out my array access the item at key which would be the value so this is the value so a lot of times objects are referred to as key value stores so let's just do this let's call it a vowel and we'll say my array at get give me the item in my array at key right which will leave a value and then we'll just print out the key and then the value okay key value stores all right so this is one way we can iterate through a property or through an object you get the object keys and then here we get object values so iterate through the keys there for oh yeah i'm sorry the um this is not the uh the key right the array is uh an array of these items right so key oh we need to iterate over keys not my array all right so my array had um these items in it right that was my mistake all right so object.keys we obviously want to go over my object all right so for each key of our list of keys so remember if it's plural that's almost always a collection so for each key of our list of keys right we can run this again and this should now be the the the name and then this should be the value let's run that again quiz 4 or quiz 2 and then undefined why do we have undefined there right because that's not my array anymore that's my object so again this that was my mistake he's an array there all right there we go so quiz 2 87 quiz 1 92 quiz 4 98. so that looks right all right so this is one way you can iterate over the items in an object object.keys right and then for each key in that list of keys then you can calculate the value and once you're here you have access to both the key and the value so you can do whatever you want here you might use the key to access other objects with a particular key the key might be an identifier that link um you know two different types of data structures together right and then the value is just the thing stored at the value of the object so the value here is everything on this side of our object right so that is of for of but then the last way we can iterate over um if you just need to iterate over the the the keys or the uh the values right you can just use four of but we want to learn about the for in right so we have another option console.log this was for n let's copy this paste this here so this is a four in loop okay unordered so this is for objects okay so the idea is the same you have a for loop let um value or for key in my object let value equal my object key and so now i have access to both the key of the object and the value of the object so the key of a particular entry in the object rather and then the value of that particular entry in the object so console.log and we can plug out the key and then the value okay so for key in so so the the takeaway here is the in key is going to become one of the keys right and with of uh the item is the actual item in the array right or in the ordered collection so key of keys keys is an array so this key becomes one of those items in the array right so like better example would be the character one right so character of my string this character we don't have to do anything with inde uh index values this character just becomes each one of the individual items in this string same for the array the quiz score quiz score becomes the actual item in the array not the index not the key so the index is sort of like the key for arrays right so this isn't the key it's the actual value itself so of gives you the values whereas in back down to this for in loop n will give you the keys so for key in my object i get the value by using my object the square brackets and then place in the key to retrieve the value right access by key and then log out key and value all right so this is the for in loop so important part in is going to give you the keys of the object now you can also use for n for arrays but it's not advised in is going to give you the keys of the objects in arrays the index value is the key essentially okay and also this is unordered okay so when you use this style even on an array the items in the array won't necessarily come out in the proper order all right so for n is always for unordered all right and then for of the o will tell you that it's for ordered things like strings and lists so four of is for strings and arrays for n is to iterate over the items in an object basically that's the takeaway now you can use for n for arrays but it's not recommended because it can cause problems all right so just remember four in is objects for of is for things that are ordered like strings and arrays okay so that should be enough for this video on the advanced for loops

Channel: Luke May

Views: 301

Rating: 5 out of 5

Keywords:

Id: nZe6KNv-fjs

Length: 30min 13sec (1813 seconds)

Published: Sun Feb 21 2021