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