I might come back in this lesson.
We're continuing to talk about a race and we're going to focus on array iteration.
So up until this point we've seen how we can create an array how an array is just a list of data we
can store whatever we want in there.
We can store numbers and strings and boolean values we can store other arrays but the idea is that we
have stored things in there and we've taken things out and we've accessed information like give me the
first item give me the last item or we've used push and pop and shift and n shift.
But up until this point we haven't seen how we could access every piece of an array or do some code
to every item in an array.
And that's what array iteration refers to iterating over a list iterating over an array.
Basically looping through that array and doing something to each item or with each item.
So I'll give you a few real world applications some real examples of array iteration.
So a common example is comments and posts.
So a blog posts whether it's tumblr or Reddit I guess tumblr doesn't really have comments but let's
say read it and read it.
Post has a bunch of comments.
Well those comments are stored in an array and in order to display all of those comments what actually
happens is that some code loops through it iterates over that array with 10000 comments potentially
and for each one it makes them each time all content and makes a little ally or it makes a paragraph
whatever the comments are that aged him out is generated in a loop.
When we iterate over in Iraq we'll be doing something very very similar with comments as well.
Later in this course when we talk about Noad and express it back in development we'll be using a loop
to iterate over an array of comments to print out each comment.
We'll also be using array iteration when you make it to do list.
So we've already started a simple to do list but when we actually add in each to malmsey SS will be
using a loop to go for each to do and make a little div for each to do and then we'll style each one
.
Same thing when you make a blog app we're going to use a loop and for each blog in our array of blogs
we're going to do something.
We'll make a little blog post on the page.
So radiation is really important.
It's probably the most common thing that we do with arrays.
We have a list of data.
Usually you want to do something to everything in that list.
Otherwise if you only want to work at the first thing always or the seventh item always maybe you shouldn't
be using an array.
Maybe you just store that item on its own.
So we have three objectives here.
The first one is I want to show you how you can use a for loop to iterate over an array and then I'm
going to show you something brand new called for each.
So you've seen four loops before but a foreach is something brand new it's it's exciting in my opinion
.
It's really really useful as well.
And then the last thing we'll do is compare the two.
So let's start here I have an example of using a for loop to loop through an array.
So we have an array of colors that has four items for strings red orange yellow and green.
Now if I wanted to print out each one if we didn't talk about this we didn't do a re iteration.
I'll copy this over here.
What I would have to do is something like this.
Cancel that log colors zero
and then do the same thing for 1 and 2.
And then finally for 3 which gives us green and guests heads up noxious but that's nowhere near as bad
as it could be if we had ten thousand colors in this array or 10000 comments on or read a post.
So obviously that wouldn't really work for us.
Not to mention the fact that it's not dry code.
We're repeating ourselves all the time.
So we use a loop to help automate this process because what we're doing here is the same operation.
The only thing that changes is the number 8 here.
And each time we're just adding one.
So we're starting at the beginning of the array and we're going all the way to the end so you can just
do that with a for loop as you can see here.
So our FOR loop our eye our variable starts at zero because that's always the first index in the array
.
And then we add one to it each time through the loop and we keep going.
Wow.
It's less than the length of the colors array.
So remember the length of this array is four.
So while I has less than four hours it should never equal four because colors four isn't defined.
So this type of for loop is really really common.
So let me just type it out here for our eye equals zero eyes less than color outflank and you don't
have to do it that way.
You can also do less than or equal two colors of length.
Amanda Swon which is a little bit longer so most people wouldn't write it that way but it's the same
thing.
So close out like I plus plus and open up our brackets.
And what we'll do here instead of counsel about logging let's do in on alerts alert colors.
I just like that.
So actually this shouldn't be all that new seeing seeing us using a for loop like this is new but there's
nothing new here as far as concepts.
It's just taking a for loop that you've already seen a number starting at zero and we're going up and
tell some other number and then all that we're doing is plugging that number into an array.
So let's try this.
And I hope you can read this I end up with red orange yellow green.
And let's do the same thing just with the council dot Lague instead.
And there we go.
So again what we would actually do with something like comments that do for of our I call.
And then I asked less and comments at length rather than canceled out logging something we might have
a function called make comment edged him out or something like that and that would be responsible for
making all the iChat him Alpher one comment and now we're doing it to every item in the comments array
.
OK.
So that's how we can use a for loop.
We could also go backwards so we start at the end of the array and we keep going until we hit zero.
But that's a little bit less common but there's a whole other way of iterating through an array called
a foreach.
And in my opinion foreach is much nicer to use it's simpler it's shorter and it's more common nowadays
.
Now for each has an always been a part of Javascript.
So it's relatively new compared to using a for loop or plain old for loop to loop through an array.
It came out in a I think 2009 or so.
So there will be tutorials and there are some older books that don't reference it but for what it's
worth I think that it's the the best way to loop through an array.
There's a little bit of a hurdle to get over at the very beginning as you'll see here.
It's something new it's a little intimidating where we're actually passing a function into another function
.
So I'll explain that in just a moment.
But once you get past that once you kind of learn the syntax and get used to it and you know when you
need to have brackets in parentheses and there's there's kind of a little bit of baggage that you have
to get through at the beginning but once you're comfortable with it it's so much easier than using a
for loop.
It's faster and you'll see it all over the place and I'll do my best to try and be balanced use for
loops use foreach just to kind of hit you from both directions so that you get used to both of them
.
But I'll tell you now I'm partial to four each.
So here's what it is.
It's a method called for each that's defined on every single array.
It's part of something called the array prototype which is where all of those methods like push and
pop and shift and unshipped It's where they all live.
So what it does is it takes a function as an argument as you can see here.
So we we write array whatever the name of the array is coloureds comments dot for each camel cost per
case.
And then we pass in a function.
So it doesn't actually look like this.
Normally what you'll see most often is an anonymous function like we have here.
So you pass in this entire thing which is a function and then that function is called for every single
element in the array.
So let me show you an example here.
We'll just take this code.
Copy this array over and then clear the screen first.
So we have the colors array and then we write colors for each.
And whenever I pass in we'll be called on each element and then typically we'll have nano misfunction
here and I'm not going to give it any arguments.
I'll explain what that argument is in just a moment.
So colourist up for each.
And then just the empty function.
And for now we'll do constant waterlog inside the for each Just like that.
Take a moment think about what you expect to happen I said that it causes function for every item in
the array and I'll hit enter.
And I always forget about this it doesn't make very good video here but Chrome will compress all those
councils logs into one line.
But there's a number for red here.
So it is repeating it four times one for each item in the array.
So an easier way to see that actually would be an alert and they get one letter to alert three and four
alerts.
So it's doing it for each item in the array.
But that's not all that useful just to run some code x number of times or length minus one number of
times for an array.
We usually want to use the data in that array somehow.
Whether it's making comment each time now whether it's saving something to the database whether it's
adding something to a score for each item but we usually want to interact or manipulate that data in
some way rather than just arbitrarily alerting or comes to that logging.
So the way that we get that data is by having our function whatever this function is whether it's an
anonymous function a named function function expression.
It doesn't matter.
But whatever that function is we have it except an argument so let me rewrite this here and it can be
called anything we want just like any other function that we define.
So I'll start with a terrible name like I love dogs which you would hopefully never use in your code
unless it really made sense in some situation.
I can't think of many though and what I'll do is take either of dogs and print.
I love dogs each time so don't log inside the for each.
Plus I love dogs and I'll hit enter and you'll see we get inside the forage read inside the forage orange
inside the forage yellow and finally inside the for each green.
So what's happening is that I love dogs is holding the value of each item in that array as we loop through
or as the foreach loops through.
So it's calling this function for each item this entire function here.
And not only is it just calling it but it's passing in red and then orange and then yellow and then
green into this function.
So let me show you an alternate syntax.
Well it's not really an alternate syntax but another way of defining a function and passing it in.
So it's just like any other function.
And going to call it print color and all that it will do is take an argument called Color and then instead
of here I'll do a constant log and let's just do a line of stars there to start and I'll copy that line
and then below it will do not log color.
And then again a piece outline.
OK.
So we've to find a simple function.
Hopefully this is review at this point takes an argument called Color and I hit Enter nothing happens
because I've only defined the function.
But now if I call it print color and let's do purple.
Obviously the best color I get stars Purple stars.
And just as review I get undefined because my function doesn't actually return anything but it prints
three lines.
OK so I can use for each to run this print color on every item in the array and all that I have to do
is colors which is my array for each and then rather than typing out a whole function here.
All I do is pass in print color and this is a really important note that I don't put parentheses here
if I do put those parentheses there.
I'm going to immediately call that function.
Remember whenever javascript's sees a function followed by parentheses it executes it.
So it doesn't matter that I'm passing it into for each It will be called before we want it to be called
what we actually want to do is just pass in print color without parentheses we're telling for each.
Here we go.
Here's the function.
I want you to call for me later.
When you loop through and I want you to call it on each item in the array.
So then what will happen if we fast forward.
Well let me hit enter first and you'll see we get purple while it starts here red orange yellow and
green.
So what's happening behind the scenes is that for each is taking print color and it's running print
color red print color orange Except it doesn't really look like that.
It looks more like this print color colors Pi which starts at 0 and then pretty colors colors one.
So it's taking our print colors function and it's actually calling it for us.
So we just tell it what to call and it we'll call it on the items.
So for each It's really nice because we don't have to work with I we don't have to write out the syntax
for a for loop and we don't have to access colors I inside of our code or that we access is whatever
we call it here.
So color in this case but remember I showed that as I love dogs which is not a good name really but
it can be anything that we want and hopefully it means more than colors.
So again we can use both of them for and for each for each is newer more popular and I prefer it but
I'll do my best to give you a balanced perspective or at least force you to see both.
And then here's a comparison of the two ways of looping through and there's more than two ways we could
use a while loop of course which I'll show you briefly.
We could do the same thing for colors.
All we need to do is define a variable.
Let's call it count and it's equal to zero at the beginning.
And then we're going to do while count is less than colourist out length just like our for each.
I mean just like a for loop.
And then instead of here we have to increment count before we forget and then we can just do a constant
alt log colour's counts.
So it's a little more syntax just like every while loop is usually compared to a for loop.
We have to define a variable first and then we have to increment it inside the loop and we end up with
red orange yellow green.
So you could use a while loop but it's it's really rare almost never will you see anyone do that.
It's almost always a for loop or a for each.
And increasingly it's pretty much always for each.
There are cases though where for each doesn't exist which I'll make sure to point out with some of the
browser stuff some of the H M L C Ss and Javascript stuff when we combine everything together there
will be moments where we're working with things that look like arrays but they're actually not.
And it's really confusing.
But I'll make sure that you're aware of it and we can't use it for each then.
So it's always good to remember how you write a for loop and how you do the same thing with for each
.
So that's what this code shows you here take a moment to study it if you'd like.
The key differences are the fact that in a for loop we're dealing with a number.
So we're going from a number from zero up until the end of the array and we're actually using that number
to access the array colors.
I in a foreach that's abstracted away from us.
So all that we're dealing with is a name that we've created a temporary placeholder color or item or
thing whatever it is comments post friend and you use that instead of a function.
And most common most often you'll see an anonymous function here unless there's a function that you
want to reuse later on and you want to call it some other parts of your code then you might define it
you might give it a name outside the foreach.
OK.
So we covered a lot.
They're really important stuff loops plus functions plus arrays things kind of coming together now.
Again I'll do my best to make sure you see both ways of writing a loop throughout the course and next
up we have a really short very quick exercise shouldn't take more than 30 seconds.