Original subtitles

1 1

So we learned about the for of loop 2

2

to loop over a race, which remember is an Iterable, 3

3

but we can also loop over objects, 4

4

which are not Iterable, 5

5

but in an indirect way. 6

6

Now we have different options here, 7

7

depending on what exactly we want to loop over. 8

8

So do we want to loop over the objects, property names 9

9

over the values or both together. 10

10

And let's start by simply looping over property names. 11

11

And so remember they are also called keys. 12

12

Now, ultimately we will still have to use the for of loop 13

13

to loop over the array, but again, 14

14

we're going to do that in an indirect way. 15

15

So we're not actually looping over the object itself. 16

16

Instead, we're going to loop over, an array. 17

17

So let me show you how. 18

18

So I'm going to call this day 19

19

and you will see in a moment why, 20

20

and now of, 21

21

and then I say object 22

22

dot keys 23

23

and we pass in the opening hours object. 24

24

And now lets simply to see what happens here. 25

25

Log the day variable to the console. 26

26

And then I will explain what happened here. 27

27

So indeed we get Thursday, Friday and Saturday, 28

28

which are exactly the three key names of the object. 29

29

So we can see that here. 30

30

So indeed Thursday, Friday and Saturday. 31

31

So let's take a closer look 32

32

at this mysterious objects dot keys. 33

33

And let's do that here before actually. 34

34

So let's just say properties, equal object 35

35

dot keys, 36

36

and then again, opening hours. 37

37

And now I want to take a look at the result here. 38

38

And so indeed it is an array with the three property names. 39

39

Okay. And we can actually also use this 40

40

to now compute how many properties are in the object. 41

41

So let's say we wanted to print a strings saying 42

42

how many days the restaurant is open. 43

43

That would be simple. Right? 44

44

We can just log to the console. 45

45

We are 46

46

open 47

47

on 48

48

and then 49

49

properties 50

50

dot length. 51

51

And now we get the number of properties here, of course. 52

52

And so that's three days. Okay. 53

53

And so this is also the array 54

54

that we're going to be looping over. 55

55

So properties. 56

56

And that's why I called this variable here day 57

57

because this array basically contains three days. 58

58

Now let's actually do something cool here. 59

59

And instead store this into a variable 60

60

and let's say open 61

61

and then STR for string 62

62

And tier a colon because now using the loop, 63

63

I will basically keep adding to this string. 64

64

So open string plus equal, 65

65

and then the current day, 66

66

so day and then a comma. 67

67

And so here we are then essentially building 68

68

just this string. 69

69

So that's similar to something we did already before. 70

70

And so the end is we are open on three days, 71

71

Thursday, Friday, Saturday. 72

72

Great. So that's property names. Let's write that here. 73

73

Okay. But what if we actually wanted 74

74

the property values themselves? 75

75

Well, then we would simply use 76

76

object 77

77

dot values. 78

78

So let's also store this here 79

79

and of course, then we need to pass in the object itself. 80

80

So that's again, opening hours 81

81

missing the equal sign. 82

82

And now let's just take a look at the values 83

83

and indeed, these are exactly the three values 84

84

that we specified right here. 85

85

So this value here, 86

86

right? 87

87

So open 12, close 22, this one and this one. 88

88

Right? 89

89

So before we had the keys, now we have the values 90

90

and there no needs to now loop over them again, 91

91

because it's going to work exactly the same as here. 92

92

Okay. But now to really simulate, 93

93

to loop over the entire object, 94

94

we actually need the entries. 95

95

And so entries is basically names plus the values together. 96

96

And we already saw the entries before. 97

97

So when we looped over 98

98

the array 99

99

and I think that's going to be somewhere down here 100

100

oh and actually I already passed it. 101

101

So indeed here it is. 102

102

So here on the array, we called this entries method. 103

103

And so the entries returned the index number 104

104

and the element itself. 105

105

And so we can do something similar on objects 106

106

and that will then also return the key and the value. 107

107

Okay, now it works differently on objects 108

108

because it's not going to be a method 109

109

that we call on the object itself. 110

110

So here we had the menu array 111

111

and then we did that menu array dot entries, 112

112

but now here we do it 113

113

differently. 114

114

So we use again object, 115

115

dot entries 116

116

and then we pass in once again, the opening hours. 117

117

So this distinction between the array and the object 118

118

is important as we loop over the entire object. 119

119

Okay. I actually run into that problem myself at some point. 120

120

And so that's why I'm telling it to you. 121

121

But anyway, let's store this again into a variable. 122

122

And so then you have all the three versions here, 123

123

nicely organized in your code. 124

124

And let's take a look here at the entries now. 125

125

And so as you might've expected, we now get an array. 126

126

So all of these keys, values and entries 127

127

basically transformed the object into an array. 128

128

And then here we have first the key 129

129

and then then value. 130

130

All right. And so now we can use this 131

131

to basically loop over the object. 132

132

So for, and now let's start by writing the of, 133

133

we'll just call it X for now. Then we will take a look. 134

134

So X of 135

135

the entries that we just generated 136

136

and then let's just log them to the console. 137

137

And so let me get rid 138

138

of this one here. 139

139

All right. So that's weird. 140

140

Oh, it's because of course I want to log X. 141

141

Oh yeah, that's correct. 142

142

So now we have each key and each value, all right. 143

143

Now we want to print to the console, 144

144

a string like this, 145

145

so on the weekday. 146

146

And so that is the key. 147

147

And so I'm using these variables here, 148

148

before I actually defined them. 149

149

So to make it easier to say what we want to define. 150

150

So for example, on Friday, 151

151

we open at, 152

152

and then we're going to have an open variable 153

153

and close 154

154

at 155

155

close. 156

156

So how will we do this? 157

157

Well, just like we did with the arrays, 158

158

we can use this structuring right here. 159

159

So let's do that. 160

160

The first one is the key. 161

161

And remember the second one is the value. 162

162

So we can do this, 163

163

but we already know that this here is an object, right? 164

164

And so therefore we can also immediately destructure 165

165

that object here. 166

166

So fair enough. 167

167

Open and close. 168

168

So the two variable names inside of that object 169

169

are open and close. 170

170

And so here we specify exactly these property names 171

171

and so they get destructured and therefore this works. 172

172

So let's see that again. 173

173

And so, yeah, so this is here the value basically 174

174

all of this. 175

175

Right? 176

176

And so here we have open and close. 177

177

And so that's exactly what we defined here as well. 178

178

And therefore, we then end up with the string here, 179

179

which got all of the data out of the object 180

180

into this nicely and neat string. 181

181

Alright. 182

182

So this part here is necessary 183

183

because the value itself is also an object. 184

184

But if you had a more simple object with a simpler value, 185

185

then you would, of course only do this here 186

186

as destructuring, just a key and a value. 187

187

And of course you could then give them other names 188

188

as you would like. 189

189

So here we can just call them day. 190

190

We can use any name that we want. Awesome. 191

191

So we're doing great progress here 192

192

and now it's time to practice that once more. 193

193

So I see you in the next coding challenge.