WEBVTT 1 00:00:01.260 --> 00:00:03.950 So we learned about the for of loop 2 00:00:03.950 --> 00:00:08.170 to loop over a race, which remember is an Iterable, 3 00:00:08.170 --> 00:00:10.640 but we can also loop over objects, 4 00:00:10.640 --> 00:00:12.450 which are not Iterable, 5 00:00:12.450 --> 00:00:14.193 but in an indirect way. 6 00:00:15.950 --> 00:00:18.070 Now we have different options here, 7 00:00:18.070 --> 00:00:21.670 depending on what exactly we want to loop over. 8 00:00:21.670 --> 00:00:25.300 So do we want to loop over the objects, property names 9 00:00:25.300 --> 00:00:28.460 over the values or both together. 10 00:00:28.460 --> 00:00:32.310 And let's start by simply looping over property names. 11 00:00:32.310 --> 00:00:35.860 And so remember they are also called keys. 12 00:00:35.860 --> 00:00:39.450 Now, ultimately we will still have to use the for of loop 13 00:00:39.450 --> 00:00:42.170 to loop over the array, but again, 14 00:00:42.170 --> 00:00:44.420 we're going to do that in an indirect way. 15 00:00:44.420 --> 00:00:47.980 So we're not actually looping over the object itself. 16 00:00:47.980 --> 00:00:51.930 Instead, we're going to loop over, an array. 17 00:00:51.930 --> 00:00:53.163 So let me show you how. 18 00:00:56.220 --> 00:00:57.480 So I'm going to call this day 19 00:00:57.480 --> 00:00:59.490 and you will see in a moment why, 20 00:00:59.490 --> 00:01:00.833 and now of, 21 00:01:01.710 --> 00:01:03.150 and then I say object 22 00:01:04.190 --> 00:01:05.860 dot keys 23 00:01:05.860 --> 00:01:09.830 and we pass in the opening hours object. 24 00:01:09.830 --> 00:01:13.490 And now lets simply to see what happens here. 25 00:01:13.490 --> 00:01:17.290 Log the day variable to the console. 26 00:01:17.290 --> 00:01:20.190 And then I will explain what happened here. 27 00:01:20.190 --> 00:01:23.680 So indeed we get Thursday, Friday and Saturday, 28 00:01:23.680 --> 00:01:28.063 which are exactly the three key names of the object. 29 00:01:29.270 --> 00:01:30.470 So we can see that here. 30 00:01:32.470 --> 00:01:35.930 So indeed Thursday, Friday and Saturday. 31 00:01:35.930 --> 00:01:37.590 So let's take a closer look 32 00:01:37.590 --> 00:01:41.080 at this mysterious objects dot keys. 33 00:01:41.080 --> 00:01:43.030 And let's do that here before actually. 34 00:01:46.460 --> 00:01:51.360 So let's just say properties, equal object 35 00:01:51.360 --> 00:01:52.203 dot keys, 36 00:01:53.590 --> 00:01:55.690 and then again, opening hours. 37 00:01:55.690 --> 00:01:59.743 And now I want to take a look at the result here. 38 00:02:01.880 --> 00:02:05.863 And so indeed it is an array with the three property names. 39 00:02:06.824 --> 00:02:09.400 Okay. And we can actually also use this 40 00:02:09.400 --> 00:02:13.660 to now compute how many properties are in the object. 41 00:02:13.660 --> 00:02:16.960 So let's say we wanted to print a strings saying 42 00:02:16.960 --> 00:02:20.260 how many days the restaurant is open. 43 00:02:20.260 --> 00:02:22.750 That would be simple. Right? 44 00:02:22.750 --> 00:02:24.453 We can just log to the console. 45 00:02:25.360 --> 00:02:26.990 We are 46 00:02:26.990 --> 00:02:28.530 open 47 00:02:28.530 --> 00:02:30.120 on 48 00:02:30.120 --> 00:02:30.953 and then 49 00:02:32.110 --> 00:02:33.030 properties 50 00:02:34.440 --> 00:02:35.403 dot length. 51 00:02:38.270 --> 00:02:41.750 And now we get the number of properties here, of course. 52 00:02:41.750 --> 00:02:44.560 And so that's three days. Okay. 53 00:02:44.560 --> 00:02:47.930 And so this is also the array 54 00:02:47.930 --> 00:02:49.730 that we're going to be looping over. 55 00:02:50.570 --> 00:02:52.410 So properties. 56 00:02:52.410 --> 00:02:55.840 And that's why I called this variable here day 57 00:02:55.840 --> 00:02:59.650 because this array basically contains three days. 58 00:02:59.650 --> 00:03:02.720 Now let's actually do something cool here. 59 00:03:02.720 --> 00:03:05.460 And instead store this into a variable 60 00:03:06.960 --> 00:03:09.120 and let's say open 61 00:03:10.009 --> 00:03:11.940 and then STR for string 62 00:03:14.660 --> 00:03:17.700 And tier a colon because now using the loop, 63 00:03:17.700 --> 00:03:22.230 I will basically keep adding to this string. 64 00:03:22.230 --> 00:03:25.363 So open string plus equal, 65 00:03:26.200 --> 00:03:27.463 and then the current day, 66 00:03:29.580 --> 00:03:31.630 so day and then a comma. 67 00:03:31.630 --> 00:03:34.410 And so here we are then essentially building 68 00:03:34.410 --> 00:03:35.603 just this string. 69 00:03:37.730 --> 00:03:40.383 So that's similar to something we did already before. 70 00:03:41.560 --> 00:03:44.230 And so the end is we are open on three days, 71 00:03:44.230 --> 00:03:47.160 Thursday, Friday, Saturday. 72 00:03:47.160 --> 00:03:50.923 Great. So that's property names. Let's write that here. 73 00:03:57.300 --> 00:03:59.900 Okay. But what if we actually wanted 74 00:03:59.900 --> 00:04:02.053 the property values themselves? 75 00:04:04.420 --> 00:04:06.250 Well, then we would simply use 76 00:04:07.560 --> 00:04:09.310 object 77 00:04:09.310 --> 00:04:11.373 dot values. 78 00:04:12.810 --> 00:04:14.480 So let's also store this here 79 00:04:16.000 --> 00:04:20.390 and of course, then we need to pass in the object itself. 80 00:04:20.390 --> 00:04:23.230 So that's again, opening hours 81 00:04:25.190 --> 00:04:26.580 missing the equal sign. 82 00:04:26.580 --> 00:04:30.460 And now let's just take a look at the values 83 00:04:34.220 --> 00:04:37.700 and indeed, these are exactly the three values 84 00:04:37.700 --> 00:04:40.270 that we specified right here. 85 00:04:40.270 --> 00:04:42.260 So this value here, 86 00:04:42.260 --> 00:04:43.093 right? 87 00:04:43.093 --> 00:04:47.520 So open 12, close 22, this one and this one. 88 00:04:47.520 --> 00:04:48.550 Right? 89 00:04:48.550 --> 00:04:53.170 So before we had the keys, now we have the values 90 00:04:53.170 --> 00:04:55.950 and there no needs to now loop over them again, 91 00:04:55.950 --> 00:04:59.253 because it's going to work exactly the same as here. 92 00:05:00.330 --> 00:05:03.110 Okay. But now to really simulate, 93 00:05:03.110 --> 00:05:05.810 to loop over the entire object, 94 00:05:05.810 --> 00:05:08.310 we actually need the entries. 95 00:05:08.310 --> 00:05:12.610 And so entries is basically names plus the values together. 96 00:05:12.610 --> 00:05:15.570 And we already saw the entries before. 97 00:05:15.570 --> 00:05:17.340 So when we looped over 98 00:05:18.400 --> 00:05:19.340 the array 99 00:05:19.340 --> 00:05:22.370 and I think that's going to be somewhere down here 100 00:05:22.370 --> 00:05:24.700 oh and actually I already passed it. 101 00:05:24.700 --> 00:05:27.140 So indeed here it is. 102 00:05:27.140 --> 00:05:31.360 So here on the array, we called this entries method. 103 00:05:31.360 --> 00:05:34.030 And so the entries returned the index number 104 00:05:34.030 --> 00:05:36.030 and the element itself. 105 00:05:36.030 --> 00:05:38.760 And so we can do something similar on objects 106 00:05:38.760 --> 00:05:42.640 and that will then also return the key and the value. 107 00:05:42.640 --> 00:05:45.780 Okay, now it works differently on objects 108 00:05:45.780 --> 00:05:47.580 because it's not going to be a method 109 00:05:47.580 --> 00:05:50.370 that we call on the object itself. 110 00:05:50.370 --> 00:05:52.630 So here we had the menu array 111 00:05:52.630 --> 00:05:56.450 and then we did that menu array dot entries, 112 00:05:56.450 --> 00:05:57.630 but now here we do it 113 00:05:58.900 --> 00:05:59.733 differently. 114 00:06:00.700 --> 00:06:02.283 So we use again object, 115 00:06:03.180 --> 00:06:05.090 dot entries 116 00:06:05.090 --> 00:06:08.253 and then we pass in once again, the opening hours. 117 00:06:10.140 --> 00:06:12.780 So this distinction between the array and the object 118 00:06:12.780 --> 00:06:15.963 is important as we loop over the entire object. 119 00:06:17.920 --> 00:06:22.920 Okay. I actually run into that problem myself at some point. 120 00:06:23.090 --> 00:06:25.640 And so that's why I'm telling it to you. 121 00:06:25.640 --> 00:06:29.430 But anyway, let's store this again into a variable. 122 00:06:29.430 --> 00:06:32.030 And so then you have all the three versions here, 123 00:06:32.030 --> 00:06:33.883 nicely organized in your code. 124 00:06:35.410 --> 00:06:37.773 And let's take a look here at the entries now. 125 00:06:39.550 --> 00:06:43.300 And so as you might've expected, we now get an array. 126 00:06:43.300 --> 00:06:46.580 So all of these keys, values and entries 127 00:06:46.580 --> 00:06:50.060 basically transformed the object into an array. 128 00:06:50.060 --> 00:06:53.600 And then here we have first the key 129 00:06:53.600 --> 00:06:56.090 and then then value. 130 00:06:56.090 --> 00:06:58.800 All right. And so now we can use this 131 00:06:58.800 --> 00:07:01.453 to basically loop over the object. 132 00:07:02.760 --> 00:07:06.533 So for, and now let's start by writing the of, 133 00:07:08.650 --> 00:07:11.933 we'll just call it X for now. Then we will take a look. 134 00:07:13.030 --> 00:07:14.720 So X of 135 00:07:15.710 --> 00:07:17.770 the entries that we just generated 136 00:07:19.050 --> 00:07:22.083 and then let's just log them to the console. 137 00:07:24.250 --> 00:07:26.700 And so let me get rid 138 00:07:27.700 --> 00:07:29.333 of this one here. 139 00:07:31.110 --> 00:07:33.780 All right. So that's weird. 140 00:07:33.780 --> 00:07:37.560 Oh, it's because of course I want to log X. 141 00:07:37.560 --> 00:07:39.820 Oh yeah, that's correct. 142 00:07:39.820 --> 00:07:44.240 So now we have each key and each value, all right. 143 00:07:44.240 --> 00:07:46.793 Now we want to print to the console, 144 00:07:48.846 --> 00:07:50.720 a string like this, 145 00:07:50.720 --> 00:07:53.260 so on the weekday. 146 00:07:53.260 --> 00:07:54.453 And so that is the key. 147 00:07:55.360 --> 00:07:57.980 And so I'm using these variables here, 148 00:07:57.980 --> 00:07:59.800 before I actually defined them. 149 00:07:59.800 --> 00:08:03.370 So to make it easier to say what we want to define. 150 00:08:03.370 --> 00:08:05.610 So for example, on Friday, 151 00:08:05.610 --> 00:08:08.083 we open at, 152 00:08:09.920 --> 00:08:13.610 and then we're going to have an open variable 153 00:08:13.610 --> 00:08:15.470 and close 154 00:08:15.470 --> 00:08:16.303 at 155 00:08:17.690 --> 00:08:19.040 close. 156 00:08:19.040 --> 00:08:21.350 So how will we do this? 157 00:08:21.350 --> 00:08:23.610 Well, just like we did with the arrays, 158 00:08:23.610 --> 00:08:26.203 we can use this structuring right here. 159 00:08:27.540 --> 00:08:28.933 So let's do that. 160 00:08:29.900 --> 00:08:31.810 The first one is the key. 161 00:08:31.810 --> 00:08:34.850 And remember the second one is the value. 162 00:08:34.850 --> 00:08:36.490 So we can do this, 163 00:08:36.490 --> 00:08:40.330 but we already know that this here is an object, right? 164 00:08:40.330 --> 00:08:44.180 And so therefore we can also immediately destructure 165 00:08:44.180 --> 00:08:45.323 that object here. 166 00:08:46.560 --> 00:08:48.193 So fair enough. 167 00:08:49.570 --> 00:08:51.053 Open and close. 168 00:08:51.950 --> 00:08:55.290 So the two variable names inside of that object 169 00:08:55.290 --> 00:08:56.620 are open and close. 170 00:08:56.620 --> 00:09:00.340 And so here we specify exactly these property names 171 00:09:00.340 --> 00:09:04.943 and so they get destructured and therefore this works. 172 00:09:05.800 --> 00:09:07.043 So let's see that again. 173 00:09:08.220 --> 00:09:11.550 And so, yeah, so this is here the value basically 174 00:09:11.550 --> 00:09:12.383 all of this. 175 00:09:13.530 --> 00:09:14.363 Right? 176 00:09:14.363 --> 00:09:17.620 And so here we have open and close. 177 00:09:17.620 --> 00:09:20.203 And so that's exactly what we defined here as well. 178 00:09:21.440 --> 00:09:24.610 And therefore, we then end up with the string here, 179 00:09:24.610 --> 00:09:27.490 which got all of the data out of the object 180 00:09:27.490 --> 00:09:30.440 into this nicely and neat string. 181 00:09:30.440 --> 00:09:32.030 Alright. 182 00:09:32.030 --> 00:09:33.770 So this part here is necessary 183 00:09:33.770 --> 00:09:37.720 because the value itself is also an object. 184 00:09:37.720 --> 00:09:41.660 But if you had a more simple object with a simpler value, 185 00:09:41.660 --> 00:09:43.890 then you would, of course only do this here 186 00:09:43.890 --> 00:09:48.090 as destructuring, just a key and a value. 187 00:09:48.090 --> 00:09:50.330 And of course you could then give them other names 188 00:09:50.330 --> 00:09:51.880 as you would like. 189 00:09:51.880 --> 00:09:53.983 So here we can just call them day. 190 00:09:54.960 --> 00:09:58.510 We can use any name that we want. Awesome. 191 00:09:58.510 --> 00:10:01.190 So we're doing great progress here 192 00:10:01.190 --> 00:10:04.260 and now it's time to practice that once more. 193 00:10:04.260 --> 00:10:06.993 So I see you in the next coding challenge.