Original subtitles

1 1

All right. 2

2

So we learned all about the for loop 3

3

and even created a loop inside a loop, 4

4

but there is another type of loop in JavaScript 5

5

and that's the while loop. 6

6

So let's explore that one now. 7

7

And to understand how the while loop works 8

8

and the difference between the for and the while loop, 9

9

let's actually go back to our first for loop lecture 10

10

and get back the code of this weightlifting exercise. 11

11

So just copy this and we will keep it for comparison 12

12

basically. 13

13

So let's put it back to 10 here as well, 14

14

and so let's now do the same thing with a while loop. 15

15

So implementing the same with a while loop, 16

16

we still need the same components. 17

17

So we still need a counter so that we can then actually 18

18

print the current value to the console, 19

19

we still need a condition so that we know when to stop 20

20

and we still need to increase the counter somehow. 21

21

Now in the while loop, 22

22

it works a bit differently because for the while loop, 23

23

we can only specify a condition. 24

24

So while, and then just a condition 25

25

is the only thing that we can specify here. 26

26

So that's gonna be exactly the same as this one. 27

27

So we want to keep the loop running while repetitions 28

28

is less or equal 10. 29

29

And that's actually why this loop is called while. 30

30

So again, it's called the while loop 31

31

because it will run while this condition is true. 32

32

Alright. 33

33

But now we need to kind of manually, 34

34

so more explicitly define the other two components 35

35

of the for loop. 36

36

So the repetitions and the increasing of the counter. 37

37

And so we need to do that basically outside. 38

38

So we start at the beginning with rep equal one, 39

39

then we have the condition, 40

40

then let's put the code that we want to execute 41

41

and then at the end of the iteration, 42

42

we will then increase the counter. 43

43

And so let's just do that. 44

44

So at the end of the iteration is basically the end 45

45

of this code block, and so let's do that there, 46

46

and that's it. 47

47

And so now we should get the exact same result twice, 48

48

once coming from this for loop 49

49

and once coming from this while loop. 50

50

And yeah, so 1 to 10, and then again, 1 to 10 51

51

coming from the while loop, just write that here, 52

52

just to make 100% sure. 53

53

Yeah. 54

54

And indeed the second set here 55

55

is coming from the while loop. 56

56

So this all means that the while loop 57

57

is more versatile than the for loop, 58

58

which means that it can be used 59

59

in a larger variety of situations. 60

60

And that's because it does not really need a counter. 61

61

So you put the counter here because we need it 62

62

for this specific use case. 63

63

But all the while loop really needs is the condition 64

64

which needs to stay true for it to keep running. 65

65

And that condition can be any condition, 66

66

it doesn't have to be related to any counter at all. 67

67

And sometimes that's exactly what we need 68

68

to solve a certain problem. 69

69

So a problem without any counter, 70

70

so without a number that is increasing. 71

71

And so let's create such an example here. 72

72

So I will start by taking off this for loop, 73

73

we no longer need that one 74

74

and now we will do a simple example 75

75

that does not depend on a counter, 76

76

but instead it will depend on a random variable, okay. 77

77

So what we're gonna do is to basically roll a dice 78

78

and then keep rolling the dice until we roll a six. 79

79

And then when we roll a six, we stop. 80

80

So essentially we will want to keep running the loop 81

81

while the rolled dice is different from six. 82

82

And so in this case, 83

83

we do actually not know beforehand 84

84

how many times the loop should run. 85

85

And so we don't need a counter variable 86

86

and that's exactly the use case of a while loop. 87

87

So let's start by creating that random number. 88

88

And so the roll of a dice is a number between one and six, 89

89

the way that we implement this 90

90

does not matter at this point, okay. 91

91

We will learn more about random numbers at a later point, 92

92

and so for now, 93

93

just basically just type what I am writing here. 94

94

So we're using Math.random, 95

95

and this will create a number between zero and one, 96

96

then we multiply that by a six, 97

97

but this is gonna be a decimal number. 98

98

Let me just show it out to you quickly, 99

99

because I think this is still interesting for you. 100

100

So you see that it's a decimal number, 101

101

and so now we need to get rid of this decimal part. 102

102

And so that we do using Math.trunc, 103

103

and so this will give us a number between zero and five 104

104

and then we add one and get one to six. 105

105

So again, don't worry about the implementation of this 106

106

at this point, we will do this again later. 107

107

But what matters here is that as we reload the page, 108

108

we get a random number here that is different every time. 109

109

And so it will be different for you of course, 110

110

so different from what you see in the video 111

111

as you keep reloading your own page. 112

112

Okay. 113

113

And so now let's do what I explained earlier. 114

114

So again, we want to keep running the loop 115

115

until we roll a six. 116

116

So until this dice variable here holds the value of six. 117

117

And so the condition of the loop is now gonna be, 118

118

dice different from six. 119

119

And as soon as the value is six, it will stop. 120

120

And let's lock the value to the console here. 121

121

So, 'You rolled a $ dice', 122

122

and so that's get rid of this one here 123

123

and now let's log it to the console, 124

124

but keep in mind that actually right now 125

125

we are only creating one dice value. 126

126

So at this point a loop doesn't make a lot of sense, 127

127

and so actually let's keep working on this 128

128

before we test it. 129

129

So again, we are only creating one random number 130

130

between one and six here, right? 131

131

And if that's different than six, this loop here will run. 132

132

But right now the loop would then run forever, 133

133

which I'm not going to show you here now 134

134

because that would crash the browser. 135

135

So this would be called an infinite loop 136

136

and we don't want that. 137

137

So what we will do is to keep creating new dice values. 138

138

And so we are gonna reassign this value 139

139

at the end of each iteration. 140

140

And so now we're ready to test the result here. 141

141

Whoa, you see we got a lot of dice rolls here. 142

142

Let me actually also comment out just this console.log here, 143

143

and so of course your result will be different from mine, 144

144

because we are using different random numbers. 145

145

But anyway, let's analyze what happened here. 146

146

So we start with some random dice number 147

147

and then here we check if that dice is different from six. 148

148

And apparently it was different, 149

149

and so then we entered the loop, which then logged, 150

150

'You rolled a 2'. 151

151

So my random number was first a two. 152

152

Then in the next line we created a new random number 153

153

and then the loop run again. 154

154

So again, this condition was tested. 155

155

So is the dice different from six, and apparently it was, 156

156

and so we entered the loop again. 157

157

And so it printed, 'You rolled a 1'. 158

158

And then the next dice was a five, 159

159

and then the next one was a four. 160

160

But then apparently the next dice 161

161

that was rolled here was a six. 162

162

So at the end of this iteration here, 163

163

this dice value was a six. 164

164

And so then in the next iteration, 165

165

dice was actually equal six. 166

166

And so then the condition is no longer true 167

167

and the loop stopped. 168

168

And let me actually write one more line of code here 169

169

in which we can say, if dice is 6 then log, 170

170

'Loop is about to end'. 171

171

And so this way we can know when a six happened, 172

172

and so the very first thing that should ever happen here 173

173

in this output is this, right? 174

174

Because then when the dice was six, 175

175

the next iteration will no longer run. 176

176

So let's do that, and indeed, so we get one, five, for, one, 177

177

but no six and then, 'Loop is about to end', 178

178

and so the dice was six, and so this condition was true, 179

179

and so we saw this log to the console 180

180

and then in the next iteration, again six equals six 181

181

and so the loop finished. 182

182

Let's try some more times, and of course it works. 183

183

Oh, and now we got a situation where the first dice ever 184

184

was a six, and so the loop never even started. 185

185

And this was the situation I was waiting for here. 186

186

So when dice is six right away in the beginning, 187

187

then of course this loop will have exactly zero iterations, 188

188

it will never start, okay. 189

189

And so the conclusion of this is that the while loop 190

190

does really not have to depend on any counter variable. 191

191

So whenever you do need a loop without a counter, 192

192

you can reach for the while loop. 193

193

So basically that happens whenever you do not know 194

194

beforehand how many iterations the loop will have. 195

195

So in that situation the while loop 196

196

is the right tool for the job. 197

197

And that's exactly what we had here. 198

198

So we had no way of knowing how many times 199

199

we would roll a dice that's different from six. 200

200

Now, on the other hand, 201

201

when we do know how many times the loop will run, 202

202

that means that we're gonna actually need a counter. 203

203

For example, when we want to loop over an array, 204

204

we already know how many elements that array has, 205

205

and so we know how many iterations we will need. 206

206

And therefore the for loop is usually the right choice 207

207

to loop over an array. 208

208

All right. 209

209

And with this, 210

210

we kind of finished the JavaScript fundamentals. 211

211

All there's left to do now is for you to complete 212

212

the final coding challenge of this section.