(upbeat music)
- [Morten] JavaScript gives us several different statements
and methods for repeating a process over and over,
or looping through arrays and nested objects.
Common to all of them is we first specify under
what conditions the loop or iteration should run
in the statement declaration,
and then we specify what should happen
at each iteration in the body of the statement.
Let's look at some of the most common
and useful iteration statements for arrays and objects.
I've set up an array called stuff that has some items in it,
and a nested object called nestedObjects,
that is an object with a bunch of nested objects
inside it named item01,
two, three, and so on.
Now I want to loop through each of them and display that
in the browser over on the right hand side.
Scrolling down, what we're overdoing is grabbing
the article in the page, then creating a UL,
and then using different loops to populate that UL,
and then finally we append that the list of list items
to that UL so that it displays in the page.
Off the top, we use a for-loop to loop through the array
and display it in the browser.
The for-loop is the classic and default way
of looping through an array,
and it also allows us to loop through anything else.
The for-loop always contains a statement like this inside
that says, we first set up a let named i,
it's could be named anything
but it's typically i just increment and we set it to zero.
Then we say for as long as i is smaller
than some specified length, then run through the loop,
and then iterate i.
What happens now is we'll keep iterating
through this content again, and again, and again.
And I will keep increasing in size
until we hit stuff.length.
Now to get this, to work with an array,
what we do is use i inside the statement here,
so we're saying stuff i.
So we're starting with item number zero,
that would be the first lot in the array,
then we iterate through that once,
then i is incremented up one,
so now we have item number one,
it's still smaller than stuff.length
so then we pass it down here, use it again,
and we keep doing that until we hit stuff.length.
So if you want to iterate through an array,
you use stuff.length that's the length property of the array
to say when the iteration should stop.
This for-loop allows you to repeat a process
as many times as you'd like,
and you just specify when you want it to stop.
It is for anything, it's not just for arrays,
but you can see when you use it for arrays,
it's a little bit clunky 'cause you have to keep passing
this i value down into the body of the loop
to get everything to work properly, but it works.
However, in modern JavaScript we have better tools.
Down here below, we have a for-of loop.
In the for-of loop, we specify which array
we're working with,
and then we say for as long as we have new items
in this array, keep iterating through them.
So we say for, then we create a const
or a let name the item or something similar,
of the array we want to work with.
So for as long as we have an item in the array,
then do this, and then we can keep looping through.
And here we're just working with a single item
so you see, we don't need to say stuff i anymore,
we're directly working with the item.
And we'll keep looping through until
there are no more items available in the array.
If you want to be even more direct,
you can also use the for-each method.
And this is the preferred way of dealing with arrays
in modern JavaScript.
The for-each method applies directly to an array,
then it grabs each of the items,
and then it performs an action on those items
in the form of a function.
So here we pass an actual function using the item
as the parameter,
and then we can deal with the item inside that function.
The difference between using a for-each method,
and using the for-of statement,
is in the for-each method, we are actively working
on the item itself in functional programming.
We're using a function to do something with the item
instead of just naming the item,
and then performing some actions around it.
Both the for-each method
and the for-of statement apply to arrays.
So what about objects?
Down here at the bottom, we have a for-in statement.
The for-in statement works exactly the same
as the for-of statements,
except we are now working with objects.
We're saying for singleObject,
in the object in question, in this case, nestedObject.
So we are saying for as long as nestedObjects
has more items, take the next item,
put it into this constant called singleObject,
and then do something with that constant.
So singleObject becomes the item we're working
with inside the loop,
then we'll do some action on it,
go up and say, are there more objects?
If so, put them in singleObject, do a thing with them,
go up again, are there more items?
No, okay, stop the for-loop.
For objects, we don't have a for-each method
or anything like it, that's because objects generally
are structured differently than arrays,
but using for-in, we can still loop through them.
So now you have four different ways of iterating
through arrays and objects,
and you can experiment with all of them to see
which one fits your work process the best.
Right now the popular standard is
to use for-each methods for arrays,
and for-in statements for objects.
But these are just opinions,
you can use the other approaches as well.
(upbeat music)