Next is For In
In the last video we covered the basics of working with loops in this video we will expand this learning and visit a new type of loop. this loop type is called for-in. the for-in loop enables use to loop through objects without the need to index the elements and monitor our loop. historically in other loop types we need to keep a close eye on avoiding the creation of endless loops the for-in loop manages this internally as it will only run through the elements of our object and then terminate.
Video Transcript
00:00So let's do that.
00:01Let's create a function.
00:02And that function will create, let's say, an average.
00:05We're going to call it avg for average.
00:07And we're going to send one parameter, which
00:08is going to be an array that will
00:10be sent into this average function.
00:12Now, let's look at another new way of creating an array.
00:16And instead of running through and actually creating
00:18those three different conditions of setting our initial value,
00:21then setting our condition.
00:23So if we were looking at it, setting our initial value,
00:25setting our condition, and then sending our what
00:28happens each time a cycle completes,
00:31each time a loop completes.
00:32So by the way, we're talking about that again.
00:34This is probably an important thing to notice
00:36is that first time around and only first time around
00:39this line happens.
00:41This doesn't happen at all.
00:43First parameter happens.
00:44We first set i to be 0.
00:46We check, then, the condition.
00:47Is our condition met?
00:48Yes, i is smaller than the length.
00:50Good.
00:51So we execute whatever's inside of here.
00:53When we completed and we reach our closing curly bracket,
00:57we immediately go back to the third parameter,
01:00basically adding one value into our for loop.
01:03As soon as we added one into our for loop from 0,
01:06now we're equal to 1.
01:07And so on and so forth.
01:09So basically, now it checks this condition, basically
01:12this if condition, you could say.
01:14And it goes on and on and on until it reaches a scenario
01:17where it can't find it.
01:19And by the way, one thing that you really want to avoid
01:22is creating a condition here that could never be met
01:24or a condition such as running a loop that will run 1,000
01:27times, you can't do that.
01:28You have to make sure that your loop has a star
01:30and it has an end.
01:31And if it doesn't have an end, you'll
01:33create something that's called an endless loop, which
01:35will break your application.
01:37OK?
01:37And that's a really important thing to note.
01:39So let's look back into our average.
01:41And let's see how could we actually run through our array
01:43in a different way.
01:45So I'm going to create our for loop.
01:47And in this for loop, I'm going to create a variable.
01:49And this time, this variable is
01:50going to be a type of string and not a type of number.
01:53And I'm going to call it key because it's
01:54going to be the key to access our information.
01:57Just as much as our i was our key,
01:59but we actually superimposed our key,
02:02letting JavaScript know what we want each time,
02:05saying we want 0, 1, and 2 based on our length
02:08because we had an index array.
02:10Now, using the key, we could actually avoid that
02:14by actually approaching it as on a string level.
02:16We're basically asking from the object itself.
02:18And it could be any object.
02:19It doesn't have to be an array.
02:21And we're asking to loop through the array using its keys.
02:25Now, how we do that is we say var key in our object,
02:31in our case, in our array.
02:33So basically, we're running through our key in an array.
02:35And I just want you all to see that if I
02:37do an alert to the key itself while it's running this loop
02:41and before that, I want to make sure
02:42that I'm actually calling that average function.
02:45So I'm going to call that function avg.
02:47And I'm going to send into it our array2, our a2.
02:52All right, so let's run this and see what happens.
02:54And if I refresh, you're going to see that I'm
02:56going to get 0, and then 1, and then 2, and so on,
02:59and getting through all the different codes.
03:01Now, just to emphasize this and make sure
03:03that you understand why this is happening,
03:04let's try and do this also with an object.
03:06So I'm going to quickly create an object.
03:08And this object, I'm just going to randomly put properties
03:12into it.
03:12So name, it's going to be Ben.
03:15Age equals 29.
03:19What else?
03:21One more.
03:22Let's put one, so version will be 2.12.
03:29So I'm version 2.12.
03:31This is my object.
03:33And instead of calling my average and sending the object,
03:35and don't worry, I know this is not a real average function.
03:38We will fix that problem in a minute.
03:40If we run our application again, calling the average function
03:43this time around, instead of sending to the average function
03:45the a2, we're going to send in this new object
03:47that we've created.
03:48If we refresh our application, we're
03:50going to see that we're going to get those keys,
03:51the name, the age, the version.
03:54So basically, we're getting all those different keys.
03:56By using the for in, which is the name of this type
04:00before loop, it enables us to loop through key by key,
04:04not even carrying.
04:05One thing to note is that the order doesn't really matter.
04:09So don't assume that the order that you typed
04:11didn't necessarily means the order it comes through.
04:13When you're using a for in, that
04:15means you don't really care really about the order.
04:17You only care to have access to all those keys,
04:19and you want to have access to the keys themselves.
04:22So instead of outputting the key itself,
04:25I could actually output the actual value
04:28by sending that key into that parameter.
04:31So in our scenario, if it's the array,
04:33it would be 0 through whatever the value of our length is.
04:36In our case, it would be 01, 01, 23, 45.
04:40In the case of the object, it would be name, age, version,
04:44and so on.
04:44In our case, because we're still sending that object,
04:47we refresh this.
04:47We should be getting Ben, 29, 2.12 in any order.
04:52The order doesn't really matter.
04:54All right, so back into our application,
04:56now we know how this for loop for in works.
04:59We're going to send in the A2 instead, and this time around,
05:01we really want to create an average.
05:03To do that, I'm going to create a new variable that
05:05is going to be my total, and my total will start equaling 0.
05:10And instead of creating an alert,
05:12I'm going to take my total and add to it
05:14the value that comes back from the value inside
05:17of that specific key by going into the A
05:20and sending it at its specific key.
05:23Now, we have the total.
05:24We have the value.
05:25After the loop is completed, because it
05:26went through every single element,
05:28and it assigned all those values.
05:29So if I do another last alert, and I just
05:32do alert to the total, and we run it one more time,
05:35we're going to see, oh, first of all,
05:37we have your little issue.
05:40Which is a really great issue, by the way,
05:41because it's going to help us figure out
05:42what we're doing here wrong.
05:44If we're doing wrong.
05:45So first of all, you can see at line 24,
05:47I'm adding to the total, but I'm not
05:48assigning it into the total.
05:50So let's fix that.
05:51And by the way, this is another really great example
05:54of when you have a bug, a lot of times,
05:56you're not going to get any messaging,
05:58and it's really about trying to figure out,
06:00OK, where could this issue be?
06:02So in this scenario, I know that the total was 0.
06:05I know here the total didn't change.
06:06The only place where the total could have changed
06:08was line 24.
06:10So I immediately looked at it, and I was like, oh, OK.
06:12I forgot to actually assign the value.
06:15I just added it into space.
06:16So if we refresh it again, we're going
06:18to see that we got 125, which is really
06:21the total of our amount.
06:22But that's not what we're looking for.
06:24We're looking for the average, and the average
06:26would be the total divided by the length of our array.
06:29So I'm going to, instead of sending an alert,
06:31we'll use a real function, and we're
06:33going to return the value that comes back, which
06:35was going to be the total divided by a length, whoop,
06:42length, which is exactly what we want.
06:44And in our scenario, we'll just put this
06:47into a new variable, which will be our summary.
06:50And we could even alert it just to make sure
06:53that we got that summary.
06:54And if I refresh our application one more time,
06:57we're going to get our averages 20.8333,
07:00and so on and so forth.
07:02And there you go.
07:02So now we use loops in two different capacities.
07:05One as a loop where we define where the beginning is
07:08and where the end was.
07:09We weren't really using an array, or we were.
07:11It didn't really matter in our scenario.
07:14We've even seen scenarios where we wanted
07:16to loop one less than the array, because we
07:18wanted to do a special condition in the last operation.
07:23The same would be true if we wanted to do for the first one.
07:26We've even explored another way of working
07:29with loops called the 4n, where we were able to loop
07:32through an array without worrying about the index
07:35itself getting key by key, going
07:37through every single element of our loop.