Original subtitles

1 1

Let's now talk about a new way of looping over arrays, 2

2

which was introduced in year six. 3

3

And that's the for-of loop. 4

4

And let's say we wanted to loop over our entire menu here. 5

5

So let's start by creating again, 6

6

the array with the entire menu. 7

7

And for that we expand restaurant dot starter menu 8

8

and restaurant dot main menu. 9

9

So nothing new at this point. 10

10

Now you already know how to loop over this array 11

11

with a regular for loop, right? 12

12

So you would have to go through all the steps 13

13

of setting up a counter, a condition 14

14

and also update the counter. 15

15

And that's a lot of work. 16

16

And so that's why we got the for-of loop now 17

17

in which you don't need any of that. 18

18

It's so much simpler. 19

19

And this is how it works. 20

20

We still write for and then we create a variable here, 21

21

let's just call it item for now 22

22

and then of menu. 23

23

And then we can log to the console simply this item. 24

24

So let's see if that works 25

25

and then I'm gonna explain why it works 26

26

and what this loop does. 27

27

So indeed we got all our elements here now, 28

28

individually logged to the console. 29

29

So this for-of loop, 30

30

which is called for-of 31

31

because it is for and then item of the menu, right? 32

32

So this loop will automatically loop over the entire array 33

33

and in each iteration, 34

34

it will give us access to the current array element, 35

35

which we can specify here. 36

36

So in this case it's called the item, 37

37

but of course we could call it anything that we want. 38

38

And so if we simply log the current item 39

39

down to the console, 40

40

well, then this is here what we get. 41

41

Simply each element logged one by one. 42

42

And that's because again, 43

43

the item variable is always 44

44

the current element in each iteration. 45

45

And also just like in the if else statement, 46

46

we don't need to create a code block 47

47

when we only have one statement here to execute, okay? 48

48

So that's pretty simple, 49

49

but it's a really nice level of obstructing 50

50

over the regular for loop. 51

51

So we can do the same thing with this one, 52

52

but without having to worry about 53

53

all the underlying details 54

54

such as counters and conditions. 55

55

What's also great about the for-of loop, 56

56

is that we can still use the continue and break keywords. 57

57

And this is important because in the next section, 58

58

you will learn other ways of looping arrays 59

59

and in those ones, 60

60

you will not be able to continue or to break. 61

61

So you will need to keep that in mind. 62

62

But now what if we also wanted the current index 63

63

and not just the current element? 64

64

Well, in the for-of loop, 65

65

it's actually a bit of a pain 66

66

when we need that index, 67

67

because originally the for-of loop 68

68

was really just meant to give you the current element. 69

69

However, you can get both 70

70

and you will have to do it like this. 71

71

So for and then again, 72

72

let's just call it item, 73

73

but now instead of just menu, 74

74

we now need to call the entries, 75

75

a method on this array. 76

76

So entries and then let's take a look at the item. 77

77

And so as you see, 78

78

each of the item is now actually an array 79

79

with the index in the array element itself. 80

80

So let's quickly take a look at 81

81

what this mysterious menu dot entries actually is. 82

82

So menu dot entries, 83

83

and so here we get this weird array iterator. 84

84

And so that's not really helpful, 85

85

but we will learn about iterators 86

86

by the end of the course. 87

87

But if we want to take a look at this, 88

88

we need to essentially expand this here, 89

89

using the spread operator 90

90

and then create a new array based out of that. 91

91

So again this is really just to take a look 92

92

at what menu dot entries actually is. 93

93

And so we see that it is basically an array, 94

94

which in each position contains a new array, 95

95

which contains the element, 96

96

so the element entity index number of that element 97

97

in the original array. 98

98

And so that's why we get, 99

99

zero, one, two, three, four, five, six, 100

100

plus all of the original elements of the menu. 101

101

And that's also the reason 102

102

why then we get this output from this loop now. 103

103

Because here we now basically have that array. 104

104

And so now each item of that array is, 105

105

well, this new array. 106

106

And so now if we wanted to like print a nice menu, 107

107

then we could take advantage of this data now. 108

108

So let's not log something nicer here. 109

109

So a template string. 110

110

So let's take the first element which is zero 111

111

and then let's actually add one to it 112

112

so that we can start the menu at one. 113

113

So here we're basically gonna display like a nice menu 114

114

in a real restaurant. 115

115

And so there the numbers don't start at zero, right? 116

116

And now here then the actual item itself, 117

117

so that's at position number one. 118

118

And so that looks quite nice, doesn't it? 119

119

So this works great here, 120

120

but we are actually at this point 121

121

smarter than doing it like this. 122

122

And that's because if item is now an array, 123

123

we can de-structure it. 124

124

We don't have to manually take element zero and element one, 125

125

that is the old school way. 126

126

So let's now do it in a better way. 127

127

And so we can actually de-structure the item, 128

128

array here, right here. 129

129

All we have to do is to use the de-structuring assignment 130

130

and then create the two variables that we want. 131

131

So let's call it i and el for element. 132

132

So here we can use i and here element. 133

133

So that's checked out and indeed it works the same. 134

134

And so once again these structuring 135

135

made our lives a little bit easier here. 136

136

So it's a really great addition 137

137

to the JavaScript language here once again. 138

138

And the same is of course true 139

139

for the for-of loop itself, 140

140

which also makes it a lot easier 141

141

to loop over arrays.