Welcome back I want to talk to you a bit about javascript looping.
You see I actually left out a few other ways that we can loop in javascript.
We've talked about our four loops are while loops are due while loops and we also talked about for each.
But there's actually two other ways that we can loop in javascript and I'm going to show you how to
do that in this video.
Now let's imagine we have a basket and this basket is an array that well has our grocery list.
Let's say we want to buy apples.
We want to buy oranges and we also want to buy grapes because grapes are nature's candy.
They're delicious.
Now in order for us to loop through this basket we know how to do this right.
We've learned about the four loops where we can just do a lot i equals zero.
Long as I is less than the basket length we anchormen die one by one.
And less just the console log basket to index of.
So that's the first type of loop that we saw.
If you run this in the browser
and hit Enter we see that we get apples oranges and grapes.
All right so that's the first way we already know how to do that.
We could also use the For Each loop that came new and S-5 and there we can just say item will use air
functions which we've learned about.
And in this era function I'll just canceled our blog
and that looks a lot cleaner than it was before.
If I run this function now
I get the same thing.
We're looping over items and I'm not going to show you how to do the while loop and the do while loop
because we've talked about it but there's two other ways that we can loop through things and Javascript.
The first one is called the four of loop and the other one is for in loop.
I know the naming is a little bit confusing but stick with me here.
The first one the for loop works in a way that's very similar to these two.
It's almost as if we're combining these two together and this is a new specification with ESX So this
is a new feature of Javascript the way it works is we start with a for loop and we say item of Baskett
you see that it the syntax cut nicely for me.
It's all blue and in here we simply say cancel the log item.
Not too bad right.
We're using the for keyword here but we're saying of.
And we're just creating a variable we can name this whatever we want.
Of Baskett which is our array.
And that's going to loop through it so that if I copy and paste this here and hit enter I get the exact
same thing.
And as we know in programming there's many way of doing things and these are just some of the ways that
we can loop through this array.
But I want to mention a key term here.
What we're doing here is something called iterating over this array and this wording.
Let's make this a little bit bigger.
This wording is really confusing at first when you first hear it.
But reading simply means we're able to go one by one through an item like let's say a basket which has
an array go one by one and look at these items and iterating is able to be done in javascript on what
we call iterable.
And these variables is something that javascript provides us that says hey you can iterate over this
thing and what is this thing.
Well in Javascript you can iterate over arrays and we've already seen that.
And also strength's instead of Baskett.
If I just turn this into a string and I run the for loop here
I see that I'm iterating over the string one by one.
So both arrays and strings are iterable in javascript because we're able to iterate over individual
items and for all of allows us to iterate over these intervals I know the wording is really really confusing.
But in a lot of tutorials books and even work place you're going to hear this word and you want to know
what it means.
But let's talk about the next thing the for loop the foreign loop looks something like this.
And actually let's bring this back to the way it was.
So not strength's it's theory.
And I'm going to comment out or delete the looping that we are already familiar with.
Just so we have better spacing here.
Now the for in loop works with objects.
So let's create an object here and we'll call this object detailed basket in this detailed basket will
be an object that contains apples.
And actually the quantity of apples that we want we want five apples and we will have oranges as well
and we can just maybe say have 10 oranges.
Lots of vitamin C.
And then finally grapes and they're delicious.
So a thousand grapes for everybody.
Now with this detailed Vaska now I can use a for loop and I can say for item in instead of of this type
detailed basket and I can Konsole dialogue here.
The
so that if I clear this let's copy detailed basket.
So that's our object.
And we run the for loop here.
Notice what happens.
I get apples oranges grapes the for in loop allows us to loop over and see the object properties.
So that I can check what I need to go grocery shopping for apples oranges and grapes.
Now here's the tricky part and you'll hear this ward mentioned a lot when you talk to your programming
friends.
And he can get really really confusing what we're doing here is not iterating because iterating is something
that we can do with arrays and strings with an object in javascript.
We're doing something called enumerating all baseball VERRET because properties of an object are what
we call in numerable and an object in javascript is enumerable if it allows us to see the properties.
So apples oranges and grapes are innumerable.
That is we can use it in a for loop to check them out.
So enumerating is for objects
and numerable and iterable what happens if I switch these around what if I have basket in here.
And the detailed basket in here.
So we're using a for loop with an object.
What do you think will happen.
It.
I'm going to copy and paste this into our console.
Hit Ron and I get an error detailed basket is not iterable.
And why is that.
Well we know that right.
I said that in javascript we have a raise in strings that are iterable and objects in most of the cases
are not iterable.
You see four of loob doesn't work with objects because simply the javascript language needs to provide
this property that is called iterable when this property is only given by arrays and strings and because
four of loops only works with iterable.
It's going to give us this.
But what about here.
What if I do a for in loop on the basket.
Which is the array.
If I copy and paste this and run this code look at that it's working.
I get 0 1 2 and that is because underneath the hood you can think of javascript arrays like objects.
Right.
Because an array has an index of 0 1 and 2.
So we can't think of Baskett as an object that has properties zero equal to apples.
We have oranges that has index of 2 or index of one and then index of two.
We have cr�pes.
So the for loop is and Neumar rating over the properties is 0 1 and 2 which lists it out for us.
Let's make this a little smaller.
But I wanted to make this video for you because a lot of people get confused between these two.
And although you can go a long time without ever using for end loops we can use something like object
docked keys that we've seen before.
Or valleys or entries or we can use for each loops or for loops instead of four of it's good to know
these differences because if you see them in a codebase you want to understand what's happening.
And also if you ever hear somebody saying iterable or numerable you kind of have an idea of the difference.
Now to review a for in loop loops over innumerable properties and numerable property names of an object
the for loop doesn't work with objects because they are not iterable.
Now there are small caveats and exceptions to these rules but 99 percent of the time you should consider
this.
You're using the for loop for objects and for loop for arrays and strings.
I'll see you in the next one.
Bob.