1
00:00:00,570 --> 00:00:05,440
When developing an application we
inevitably need to iterate over a dataset.

2
00:00:05,440 --> 00:00:10,870
For example, an Ajax request sends back
a list of names or an array of objects.

3
00:00:10,870 --> 00:00:13,270
And our program needs to go
over each item in the array.

4
00:00:14,280 --> 00:00:19,580
The array for each method provided in
ES5 made looping over an array a breeze.

5
00:00:19,580 --> 00:00:21,810
ES2015 gives us a similar but

6
00:00:21,810 --> 00:00:24,660
slightly different technique the,
the for of statements.

7
00:00:26,100 --> 00:00:29,430
You can follow along by launching
the workspace for this video.

8
00:00:29,430 --> 00:00:33,580
So from the beginning of JavaScripts
existence, we've relied heavily

9
00:00:33,580 --> 00:00:37,240
on a basic for loop, where we
determine the length of an array and

10
00:00:37,240 --> 00:00:40,940
iterate by increment a variable by one for
each pass.

11
00:00:40,940 --> 00:00:46,000
For example let's take a look at the file
for-loop.js containing a basic for loop.

12
00:00:47,270 --> 00:00:51,840
If I run the file, the console
logs the numbers one through six.

13
00:00:51,840 --> 00:00:55,300
This works well enough but
it's cumbersome.

14
00:00:55,300 --> 00:01:01,890
Now ES5 gave us for each to process each
item of an array in a callback function.

15
00:01:01,890 --> 00:01:04,650
So if you wanted to control
the loop to end it early,

16
00:01:04,650 --> 00:01:06,840
we still had to use the for loop.

17
00:01:07,860 --> 00:01:12,640
Now let's take a look at the file
for-each.js which contains

18
00:01:12,640 --> 00:01:14,500
a collection of teachers.

19
00:01:15,590 --> 00:01:20,300
So say I wanted to log only
Nick's rating to the console.

20
00:01:20,300 --> 00:01:24,280
Well using for-each it would
look something like this.

21
00:01:28,299 --> 00:01:32,680
And when I run this code,
I see Nick's rating in the console.

22
00:01:33,930 --> 00:01:38,130
But what I don't see is how many
times this function was called so

23
00:01:38,130 --> 00:01:40,958
I'll add another log message
outside of my if statement.

24
00:01:40,958 --> 00:01:47,402
We'll say console.log teacher.name.

25
00:01:49,758 --> 00:01:53,425
And you've probably already guessed that
the names of online teachers will log

26
00:01:53,425 --> 00:01:54,420
to the console.

27
00:01:54,420 --> 00:01:55,040
So let's see.

28
00:01:57,060 --> 00:01:59,150
And sure enough all nine
teacher names are logged.

29
00:02:01,580 --> 00:02:07,710
Luckily, ES2015 has a way to
iterate over an array of values and

30
00:02:07,710 --> 00:02:10,040
break out of the loop when needed.

31
00:02:10,040 --> 00:02:14,338
So I'm going to rewrite the for

32
00:02:14,338 --> 00:02:19,627
each loop using the new for of syntax by

33
00:02:19,627 --> 00:02:24,765
typing for let teacher of teachers.

34
00:02:26,941 --> 00:02:29,598
And now I can short circuit the loop or

35
00:02:29,598 --> 00:02:34,420
break out of the loop after it logs
Nick by using the break keyword.

36
00:02:37,340 --> 00:02:39,010
So let's give it a try.

37
00:02:39,010 --> 00:02:41,300
Over and the console, I'll run the code.

38
00:02:42,300 --> 00:02:45,390
And now only seven teachers are logged

39
00:02:45,390 --> 00:02:48,460
followed by Nicks rating which
is exactly what I expected.

40
00:02:50,060 --> 00:02:55,590
Keep in mind that for
of can not be used with regular objects.

41
00:02:55,590 --> 00:02:57,170
You'd want to use the for

42
00:02:57,170 --> 00:03:00,640
in statement instead when
looping over object properties.

43
00:03:00,640 --> 00:03:04,280
So check the teachers notes
to learn more about for in.

44
00:03:04,280 --> 00:03:09,260
However, for of can be used with
any interval object like strings,

45
00:03:09,260 --> 00:03:10,910
arrays, maps, and sets.

46
00:03:12,150 --> 00:03:14,870
Coming up in the next video
we'll take a look at set,

47
00:03:14,870 --> 00:03:17,760
a new type of iterable that
lets you store unique values.