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.