Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,570 --> 00:00:05,550
Let's now talk about a new way of looping over arrays,
2
00:00:05,550 --> 00:00:08,470
which was introduced in year six.
3
00:00:08,470 --> 00:00:10,723
And that's the for-of loop.
4
00:00:12,490 --> 00:00:16,283
And let's say we wanted to loop over our entire menu here.
5
00:00:17,300 --> 00:00:20,000
So let's start by creating again,
6
00:00:20,000 --> 00:00:23,130
the array with the entire menu.
7
00:00:23,130 --> 00:00:28,130
And for that we expand restaurant dot starter menu
8
00:00:29,570 --> 00:00:33,923
and restaurant dot main menu.
9
00:00:34,840 --> 00:00:38,180
So nothing new at this point.
10
00:00:38,180 --> 00:00:41,670
Now you already know how to loop over this array
11
00:00:41,670 --> 00:00:44,670
with a regular for loop, right?
12
00:00:44,670 --> 00:00:46,860
So you would have to go through all the steps
13
00:00:46,860 --> 00:00:49,830
of setting up a counter, a condition
14
00:00:49,830 --> 00:00:52,170
and also update the counter.
15
00:00:52,170 --> 00:00:53,820
And that's a lot of work.
16
00:00:53,820 --> 00:00:57,140
And so that's why we got the for-of loop now
17
00:00:57,140 --> 00:00:59,520
in which you don't need any of that.
18
00:00:59,520 --> 00:01:01,620
It's so much simpler.
19
00:01:01,620 --> 00:01:03,360
And this is how it works.
20
00:01:03,360 --> 00:01:08,360
We still write for and then we create a variable here,
21
00:01:09,330 --> 00:01:11,400
let's just call it item for now
22
00:01:11,400 --> 00:01:15,110
and then of menu.
23
00:01:15,110 --> 00:01:19,823
And then we can log to the console simply this item.
24
00:01:21,190 --> 00:01:22,760
So let's see if that works
25
00:01:22,760 --> 00:01:25,710 line:15%
and then I'm gonna explain why it works
26
00:01:25,710 --> 00:01:28,060 line:15%
and what this loop does.
27
00:01:28,060 --> 00:01:30,720 line:15%
So indeed we got all our elements here now,
28
00:01:30,720 --> 00:01:33,720 line:15%
individually logged to the console.
29
00:01:33,720 --> 00:01:35,950 line:15%
So this for-of loop,
30
00:01:35,950 --> 00:01:37,360
which is called for-of
31
00:01:37,360 --> 00:01:42,360
because it is for and then item of the menu, right?
32
00:01:42,790 --> 00:01:47,200
So this loop will automatically loop over the entire array
33
00:01:47,200 --> 00:01:48,620
and in each iteration,
34
00:01:48,620 --> 00:01:52,190
it will give us access to the current array element,
35
00:01:52,190 --> 00:01:54,690
which we can specify here.
36
00:01:54,690 --> 00:01:57,070
So in this case it's called the item,
37
00:01:57,070 --> 00:02:00,360
but of course we could call it anything that we want.
38
00:02:00,360 --> 00:02:03,040
And so if we simply log the current item
39
00:02:03,040 --> 00:02:04,840
down to the console,
40
00:02:04,840 --> 00:02:07,570 line:15%
well, then this is here what we get.
41
00:02:07,570 --> 00:02:10,720 line:15%
Simply each element logged one by one.
42
00:02:10,720 --> 00:02:12,560
And that's because again,
43
00:02:12,560 --> 00:02:14,960
the item variable is always
44
00:02:14,960 --> 00:02:18,180
the current element in each iteration.
45
00:02:18,180 --> 00:02:21,840
And also just like in the if else statement,
46
00:02:21,840 --> 00:02:23,930
we don't need to create a code block
47
00:02:23,930 --> 00:02:28,533
when we only have one statement here to execute, okay?
48
00:02:29,720 --> 00:02:31,370
So that's pretty simple,
49
00:02:31,370 --> 00:02:34,370
but it's a really nice level of obstructing
50
00:02:34,370 --> 00:02:36,310
over the regular for loop.
51
00:02:36,310 --> 00:02:38,700
So we can do the same thing with this one,
52
00:02:38,700 --> 00:02:41,150
but without having to worry about
53
00:02:41,150 --> 00:02:43,230
all the underlying details
54
00:02:43,230 --> 00:02:46,670
such as counters and conditions.
55
00:02:46,670 --> 00:02:49,210
What's also great about the for-of loop,
56
00:02:49,210 --> 00:02:53,430
is that we can still use the continue and break keywords.
57
00:02:53,430 --> 00:02:56,270
And this is important because in the next section,
58
00:02:56,270 --> 00:02:59,020
you will learn other ways of looping arrays
59
00:02:59,020 --> 00:02:59,940
and in those ones,
60
00:02:59,940 --> 00:03:03,760
you will not be able to continue or to break.
61
00:03:03,760 --> 00:03:06,053
So you will need to keep that in mind.
62
00:03:07,440 --> 00:03:11,100
But now what if we also wanted the current index
63
00:03:11,100 --> 00:03:13,570
and not just the current element?
64
00:03:13,570 --> 00:03:15,450
Well, in the for-of loop,
65
00:03:15,450 --> 00:03:17,280
it's actually a bit of a pain
66
00:03:17,280 --> 00:03:19,280
when we need that index,
67
00:03:19,280 --> 00:03:22,030
because originally the for-of loop
68
00:03:22,030 --> 00:03:25,930
was really just meant to give you the current element.
69
00:03:25,930 --> 00:03:27,790
However, you can get both
70
00:03:27,790 --> 00:03:29,973
and you will have to do it like this.
71
00:03:31,360 --> 00:03:34,683
So for and then again,
72
00:03:35,690 --> 00:03:37,053
let's just call it item,
73
00:03:38,160 --> 00:03:40,950
but now instead of just menu,
74
00:03:40,950 --> 00:03:43,220
we now need to call the entries,
75
00:03:43,220 --> 00:03:45,093
a method on this array.
76
00:03:46,600 --> 00:03:51,600
So entries and then let's take a look at the item.
77
00:03:55,990 --> 00:03:57,723 line:15%
And so as you see,
78
00:03:58,930 --> 00:04:01,390 line:15%
each of the item is now actually an array
79
00:04:01,390 --> 00:04:04,653 line:15%
with the index in the array element itself.
80
00:04:05,520 --> 00:04:07,060 line:15%
So let's quickly take a look at
81
00:04:07,060 --> 00:04:10,723 line:15%
what this mysterious menu dot entries actually is.
82
00:04:12,530 --> 00:04:14,803 line:15%
So menu dot entries,
83
00:04:16,650 --> 00:04:21,320 line:15%
and so here we get this weird array iterator.
84
00:04:21,320 --> 00:04:23,490 line:15%
And so that's not really helpful,
85
00:04:23,490 --> 00:04:25,370 line:15%
but we will learn about iterators
86
00:04:25,370 --> 00:04:27,440 line:15%
by the end of the course.
87
00:04:27,440 --> 00:04:29,900 line:15%
But if we want to take a look at this,
88
00:04:29,900 --> 00:04:32,830 line:15%
we need to essentially expand this here,
89
00:04:32,830 --> 00:04:35,160 line:15%
using the spread operator
90
00:04:35,160 --> 00:04:38,363 line:15%
and then create a new array based out of that.
91
00:04:40,310 --> 00:04:42,700 line:15%
So again this is really just to take a look
92
00:04:42,700 --> 00:04:46,100 line:15%
at what menu dot entries actually is.
93
00:04:46,100 --> 00:04:49,480 line:15%
And so we see that it is basically an array,
94
00:04:49,480 --> 00:04:52,190 line:15%
which in each position contains a new array,
95
00:04:52,190 --> 00:04:54,433 line:15%
which contains the element,
96
00:04:55,470 --> 00:04:58,800 line:15%
so the element entity index number of that element
97
00:04:58,800 --> 00:05:00,930 line:15%
in the original array.
98
00:05:00,930 --> 00:05:02,430 line:15%
And so that's why we get,
99
00:05:02,430 --> 00:05:05,750 line:15%
zero, one, two, three, four, five, six,
100
00:05:05,750 --> 00:05:09,843 line:15%
plus all of the original elements of the menu.
101
00:05:11,270 --> 00:05:12,710 line:15%
And that's also the reason
102
00:05:12,710 --> 00:05:16,230 line:15%
why then we get this output from this loop now.
103
00:05:16,230 --> 00:05:19,380
Because here we now basically have that array.
104
00:05:19,380 --> 00:05:23,470
And so now each item of that array is,
105
00:05:23,470 --> 00:05:24,853
well, this new array.
106
00:05:26,320 --> 00:05:30,180
And so now if we wanted to like print a nice menu,
107
00:05:30,180 --> 00:05:33,890
then we could take advantage of this data now.
108
00:05:33,890 --> 00:05:36,830 line:15%
So let's not log something nicer here.
109
00:05:36,830 --> 00:05:38,203
So a template string.
110
00:05:41,040 --> 00:05:45,120
So let's take the first element which is zero
111
00:05:45,120 --> 00:05:47,230 line:15%
and then let's actually add one to it
112
00:05:48,700 --> 00:05:51,490 line:15%
so that we can start the menu at one.
113
00:05:51,490 --> 00:05:54,660
So here we're basically gonna display like a nice menu
114
00:05:54,660 --> 00:05:56,200
in a real restaurant.
115
00:05:56,200 --> 00:05:59,073
And so there the numbers don't start at zero, right?
116
00:06:01,460 --> 00:06:04,490
And now here then the actual item itself,
117
00:06:04,490 --> 00:06:06,253 line:15%
so that's at position number one.
118
00:06:07,360 --> 00:06:10,570 line:15%
And so that looks quite nice, doesn't it?
119
00:06:10,570 --> 00:06:12,620 line:15%
So this works great here,
120
00:06:12,620 --> 00:06:14,640 line:15%
but we are actually at this point
121
00:06:14,640 --> 00:06:17,310 line:15%
smarter than doing it like this.
122
00:06:17,310 --> 00:06:21,030
And that's because if item is now an array,
123
00:06:21,030 --> 00:06:22,690
we can de-structure it.
124
00:06:22,690 --> 00:06:27,690
We don't have to manually take element zero and element one,
125
00:06:27,690 --> 00:06:29,720
that is the old school way.
126
00:06:29,720 --> 00:06:31,840
So let's now do it in a better way.
127
00:06:31,840 --> 00:06:35,660
And so we can actually de-structure the item,
128
00:06:35,660 --> 00:06:38,160
array here, right here.
129
00:06:38,160 --> 00:06:42,350
All we have to do is to use the de-structuring assignment
130
00:06:42,350 --> 00:06:45,290
and then create the two variables that we want.
131
00:06:45,290 --> 00:06:50,290
So let's call it i and el for element.
132
00:06:50,370 --> 00:06:55,220
So here we can use i and here element.
133
00:06:55,220 --> 00:06:59,760 line:15%
So that's checked out and indeed it works the same.
134
00:06:59,760 --> 00:07:01,580
And so once again these structuring
135
00:07:01,580 --> 00:07:04,690
made our lives a little bit easier here.
136
00:07:04,690 --> 00:07:06,580
So it's a really great addition
137
00:07:06,580 --> 00:07:09,890
to the JavaScript language here once again.
138
00:07:09,890 --> 00:07:11,610
And the same is of course true
139
00:07:11,610 --> 00:07:14,600
for the for-of loop itself,
140
00:07:14,600 --> 00:07:16,440
which also makes it a lot easier
141
00:07:16,440 --> 00:07:18,033
to loop over arrays.
10491
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.