Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
A new way to loop over items in an iterable like String, Array, Set, and Map
Resources
for...of Documentation - Mozilla Developer Network
To learn more about the uses of for...in, check out the Mozilla Developer Network Documentation
for...in Documentation - Mozilla Developer Network
When developing an application we
inevitably need to iterate over a dataset.
0:00
For example, an Ajax request sends back
a list of names or an array of objects.
0:05
And our program needs to go
over each item in the array.
0:10
The array for each method provided in
ES5 made looping over an array a breeze.
0:14
ES2015 gives us a similar but
0:19
slightly different technique the,
the for of statements.
0:21
You can follow along by launching
the workspace for this video.
0:26
So from the beginning of JavaScripts
existence, we've relied heavily
0:29
on a basic for loop, where we
determine the length of an array and
0:33
iterate by increment a variable by one for
each pass.
0:37
For example let's take a look at the file
for-loop.js containing a basic for loop.
0:40
If I run the file, the console
logs the numbers one through six.
0:47
This works well enough but
it's cumbersome.
0:51
Now ES5 gave us for each to process each
item of an array in a callback function.
0:55
So if you wanted to control
the loop to end it early,
1:01
we still had to use the for loop.
1:04
Now let's take a look at the file
for-each.js which contains
1:07
a collection of teachers.
1:12
So say I wanted to log only
Nick's rating to the console.
1:15
Well using for-each it would
look something like this.
1:20
And when I run this code,
I see Nick's rating in the console.
1:28
But what I don't see is how many
times this function was called so
1:33
I'll add another log message
outside of my if statement.
1:38
We'll say console.log teacher.name.
1:40
And you've probably already guessed that
the names of online teachers will log
1:49
to the console.
1:53
So let's see.
1:54
And sure enough all nine
teacher names are logged.
1:57
Luckily, ES2015 has a way to
iterate over an array of values and
2:01
break out of the loop when needed.
2:07
So I'm going to rewrite the for
2:10
each loop using the new for of syntax by
2:14
typing for let teacher of teachers.
2:19
And now I can short circuit the loop or
2:26
break out of the loop after it logs
Nick by using the break keyword.
2:29
So let's give it a try.
2:37
Over and the console, I'll run the code.
2:39
And now only seven teachers are logged
2:42
followed by Nicks rating which
is exactly what I expected.
2:45
Keep in mind that for
of can not be used with regular objects.
2:50
You'd want to use the for
2:55
in statement instead when
looping over object properties.
2:57
So check the teachers notes
to learn more about for in.
3:00
However, for of can be used with
any interval object like strings,
3:04
arrays, maps, and sets.
3:09
Coming up in the next video
we'll take a look at set,
3:12
a new type of iterable that
lets you store unique values.
3:14
You need to sign up for Treehouse in order to download course files.
Sign up