WEBVTT 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.