Original subtitles

1 1

In this lecture, 2

2

we're gonna do two interesting things. 3

3

First, we will loop over an array backwards, 4

4

and then second we will also create a loop 5

5

inside another loop. 6

6

So, let's have some more fun with arrays now. 7

7

And so, let's get back our array again here. 8

8

So, the Jonas' array 9

9

and let's forget about this element here. 10

10

And so now, as I said, in the beginning of this video, 11

11

let's not loop over this array backwards. 12

12

So the first element that we want to print is this one, 13

13

then this, this, this, and finally Jonas. 14

14

So essentially, in the last lecture we looped 15

15

from the beginning. 16

16

So we started with index zero, 17

17

then one all the way to four right? 18

18

But now, we want to start at four 19

19

then we want to go to three and all the way to zero, 20

20

which gonna be the last index. 21

21

So, this one is four and this one is zero. 22

22

And so, now we need to create the four loop according 23

23

to this new information. 24

24

So, basically according to this new methodology. 25

25

So, let's start again with the counter 26

26

and then we'll name it i again, 27

27

but now what should be the initial value of the counter? 28

28

And we already replied to that question kind of, 29

29

so it should be four 30

30

but should we just write the four here? 31

31

No, we shouldn't, right, 32

32

because we already learned that hard coded values 33

33

like this are not a good idea. 34

34

So what is four? 35

35

Well, four is basically just the length of the array, 36

36

which is five minus one. 37

37

So that's exactly what we will write here. 38

38

Jonas.length -1, then the condition 39

39

and when do we want the loop to stop? 40

40

Well, it should stop after the zero. 41

41

And so, the condition we need to write remember 42

42

is telling JavaScript 43

43

in which condition the loop should keep running. 44

44

And so basically, the loop should keep running as long 45

45

as the counter is still above zero. 46

46

So I should be greater 47

47

or equal actually zero. 48

48

So, let's quickly simulate that. 49

49

So, at number four which is in the beginning, 50

50

I is greater equal zero, right? 51

51

So, this condition will be true 52

52

and so the next iteration will run, 53

53

then we need to decrease the index or the counter. 54

54

And so, let's actually do that as well. 55

55

And so instead of using I plus plus, 56

56

which we used before to increment the value 57

57

we use minus minus to decrement 58

58

or to decrease the value by one. 59

59

And so now we move from four, 60

60

to three and three of course still is greater equals zero, 61

61

then all the way to zero. 62

62

And so, zero is still greater equals zero. 63

63

Then the counter gets updated again, 64

64

and it will be updated to minus one. 65

65

And now minus one is not greater or equal zero. 66

66

So this is false and so the loop will stop, okay. 67

67

So, I hope that this was not hard, 68

68

really all we have to do is to think 69

69

when we create these three parts here of the four loop 70

70

and I hope that you could follow my train of thought here. 71

71

Now, anyway the rest of course is gonna work 72

72

just exactly the same. 73

73

So, we're getting again, the current element. 74

74

So, let's check that very quickly 75

75

and yes, great job it works. 76

76

And just to really show it, 77

77

let's also look the counter variable itself. 78

78

So first the i sort of counter and then the array value. 79

79

And so, indeed this works just as we intend it 80

80

we start with number four just as we have it here, 81

81

and then we move to three, two, one, zero. 82

82

And if we now edit one element 83

83

then for sure this is gonna work just the same 84

84

because now Jonah's length is six and minus one is five 85

85

and so it will start here at true, 86

86

and indeed it does. 87

87

All right, now you will probably 88

88

not be doing this all the time 89

89

in your own code, 90

90

but I thought that this was a nice exercise. 91

91

So we could again think about how to define the counter, 92

92

the condition and the counter update. 93

93

Okay, so that was the first part of this lecture. 94

94

And now, I want to show you how we can create a loop 95

95

inside of a loop. 96

96

So, does that sound crazy? 97

97

Well, it's not so crazy 98

98

and it's not so difficult either. 99

99

And to do this, let's go back 100

100

to our gym example from the first loop lecture. 101

101

So there, we had 10 repetitions 102

102

for a certain weightlifting exercise, remember? 103

103

But now let's say that we have three different exercises 104

104

and we want to repeat each of them five times. 105

105

So that means a total 106

106

of 15 repetitions five for each of the three exercises. 107

107

So to lock all these exercises, 108

108

we will need a loop inside a loop. 109

109

So, let's roll up our sleeves and get to work here. 110

110

And we're gonna start with the three exercises. 111

111

So let's create a counter, 112

112

and I will actually call it exercise. 113

113

So exercise and we start at one now this time again 114

114

because we simply want to log exercise one, two and three. 115

115

So our condition here is that the exercise should be less 116

116

or equal three. 117

117

And actually this would be exactly the same 118

118

as writing exercise below four. 119

119

So you can do whatever you prefer most, 120

120

and I think I will actually stick with this one this time. 121

121

And then we need to increase the exercise 122

122

after each iteration as always. 123

123

So now, let's look to the console 124

124

something like this starting exercise, 125

125

and actually here we want to include the exercise number. 126

126

So that's instead created template literal. 127

127

And so, here we use that counter variable. 128

128

So, let's just check this one. 129

129

So we have three exercises 130

130

but we don't have any repetitions yet in there. 131

131

And so now again, 132

132

we need to create a loop inside a loop, 133

133

so that in each exercise we can have 134

134

the five repetitions that we want 135

135

and the repetitions themselves are a loop, right? 136

136

And so that's why we now need that loop 137

137

inside of this loop, so let's do that. 138

138

And this is gonna be basically the same 139

139

as we did earlier. 140

140

So, let's again call it a rep, start at one 141

141

and 10 the condition. 142

142

So, remember how I said, 143

143

that we want five repetitions this time. 144

144

And so, let's say we want to stay below six. 145

145

So again, that would be exactly the same as writing less 146

146

or equal five, but let's keep it a bit different this time 147

147

and say below six. 148

148

And then rep plus plus, 149

149

and now lifting weights repetition, 150

150

and again I forgot to make this a template literal. 151

151

So yes, 152

152

this should work much better. 153

153

And now, this cute emoji here again. 154

154

Oh, where is it? 155

155

And let's test this now. 156

156

So, what do you expect to see 157

157

think about that before you load your own result 158

158

or before I load here, the result. 159

159

So, is this what you expected? 160

160

Lets even increase the Sierra a little bit 161

161

and now we see the full picture. 162

162

All right, so we start exercise number one, 163

163

which is what we have here 164

164

and then inside of this iteration of exercise one, 165

165

a new loop is created and executed. 166

166

And so that's what then creates 167

167

this lifting weights repetition from one to five, 168

168

all right, then this loop here is finished, right? 169

169

So it run all the five time 170

170

that then this first iteration is finished. 171

171

And so, the exercise loop, 172

172

so this outer loop here goes to its second iteration. 173

173

And so, we are at exercise number two 174

174

and then this whole loop here will run again 175

175

from one to five, 176

176

so that's this five here, 177

177

and then that loop again finishes. 178

178

And then the exercise iteration finishes 179

179

and we go to iteration number three. 180

180

So exercises now, number three 181

181

and turn the whole repetition loop. 182

182

So, this inner loop here we'll run five times again. 183

183

And with that we end up 184

184

with a total of basically 15 repetitions 185

185

just as I said in the beginning. 186

186

So, three times five, okay. 187

187

And we could even include the number of the current exercise 188

188

in this string that we're printing here. 189

189

So that stood out as well, exercise 190

190

and then exercise. 191

191

So this is the variable that we get from the outer loop. 192

192

And so this variable here is of course available insight, 193

193

this whole loop. 194

194

And that does include all the inner code 195

195

even this inner loop. 196

196

And so that's why we can access this variable here as well. 197

197

And so now we should see exercise one printed 198

198

for these five, 199

199

then exercise to printed for these five 200

200

and exercise three for the last ones. 201

201

And yeah, beautiful. 202

202

All right, I think this was a very fun exercise. 203

203

And again, even though you might not use this all the time 204

204

in the real world I still think that this was a pretty cool 205

205

example to show you some more power of loops. 206

206

And now to wrap up this section, 207

207

all there is left to learn is another type of loop, 208

208

which is the wild loop.