Original subtitles

1 1

When we talked about the if else statement, 2

2

I mentioned that it's a control structure, 3

3

and also that there are more control structures, right? 4

4

Well, one of the other control structures are loop. 5

5

And so loops are our final big topic 6

6

in this JavaScript fundamentals section. 7

7

So, loops are a fundamental aspect 8

8

of every programming language, 9

9

because they basically allow us 10

10

to automate repetitive tasks. 11

11

So, tasks that we have to perform over and over again. 12

12

And here, I like to use the analogy of a gym. 13

13

So when you go to a gym, you might, for example, 14

14

lift weights, right? 15

15

And let's say that you do 10 repetitions 16

16

of a certain weight lifting exercise. 17

17

So we could represent that, by doing something like this. 18

18

So, lifting weights repetition one, 19

19

and then, some more emojis here. 20

20

Okay, so repetition one. 21

21

And remember, we want 10 repetitions. 22

22

So we would have to paste this code here 10 times, 23

23

and I don't know, even if this are 10 times or not. 24

24

But anyway, you can start to guess that this is probably 25

25

not a best practice, just imagine 26

26

that we had 30 repetitions instead of just 10. 27

27

And then if we wanted to, for example, change some word 28

28

here in the string, then we would have to change 29

29

that in all of them. 30

30

So, this really violates 31

31

the don't repeat yourself principle, right? 32

32

Because we're basically repeating 33

33

the same code here 10 times, and all we're changing 34

34

is just this number. 35

35

So instead of doing all this, we can now create a loop, 36

36

and then put one of these lines of code in there. 37

37

And the loop will then run that code over and over again, 38

38

until we tell it to stop. 39

39

And so let's implement a so called for loop now. 40

40

And that's a loop, which has a counter. 41

41

So, let's do that. 42

42

And we simply write for and open parenthesis. 43

43

So a little bit like the if statement. 44

44

And this is a for statement. 45

45

And so it looks similar. 46

46

Now, the loop statement has three parts. 47

47

The first part is the initial value of a counter. 48

48

And in the case of this current example, the counter is 49

49

the value that will start here at number one, 50

50

and go all the way to number 10. 51

51

So let's call this counter rep, which stands for repetition. 52

52

And so here, we literally create a variable called rep. 53

53

And we started at one, because well, 54

54

that's our first repetition. 55

55

Okay, and here, we need to use a let variable because 56

56

this counter will later be updated by the for loop. 57

57

So that's the first part of the for statement, 58

58

then we use semicolon and go to the second part. 59

59

And the second part, is a logical condition 60

60

that is evaluated before each iteration of the loop. 61

61

So before each time, that the code in the loop is executed. 62

62

So let me just write it here first, 63

63

and then this will make more sense. 64

64

So our condition will be rep needs to stay below 65

65

or equal 10. 66

66

So again, this condition that we just described here, 67

67

will be evaluated before each iteration of the loop. 68

68

Now, if the condition is true, 69

69

then the next loop iteration will run. 70

70

But as soon as this condition is false, then the loop stops. 71

71

And so no more code will then be executed. 72

72

So basically, the loop will keep running 73

73

while this condition stays true. 74

74

And this is really important to realize. 75

75

And let me actually write that down here for you. 76

76

So for loop keeps running, while condition is true. 77

77

So this is the kind of notes that I hope 78

78

that you are taking throughout the course. 79

79

But this one is really important 80

80

and so, I wanted to write it down. 81

81

Okay, and so now, I hope it makes sense that we have 82

82

this condition, because in each iteration of the loop, 83

83

the rep counter will get increased. 84

84

And so at a certain point it will reach 10. 85

85

And with 10 just condition is still true. 86

86

So 10 is still less or equal than 10. 87

87

But then, after that it will be 11. 88

88

And so then repetition is no longer, less or equal 11. 89

89

And then the loop will stop. 90

90

And at that point, we will have printed 91

91

these 10 strings, basically. 92

92

So let's continue writing this so that in the end, 93

93

we actually make that work. 94

94

So, speaking of increasing the counter, 95

95

that is actually the third part of the for statement. 96

96

So, another semicolon here. 97

97

And now here, we actually update 98

98

the counter after each iteration. 99

99

So that's necessary, because right now, 100

100

the counter would just stay at one forever. 101

101

And so this condition here would never be false. 102

102

And so what we do here, is to now increase the counter 103

103

by one after each iteration. 104

104

So, we can say rep equal rep plus one. 105

105

But does this look familiar to you. 106

106

So, basically increasing the value by just one. 107

107

Remember that in the last section, 108

108

we actually learned about a special operator, 109

109

which does just this, but in a much simpler way. 110

110

So instead of writing rep equal rep plus one, 111

111

we can simply write, rep plus plus. 112

112

And so this will take the rep value, and increase it by one. 113

113

Alright, and now all we have to do, is to write the code 114

114

that we want to be repeated. 115

115

And so let's copy this string here. 116

116

Okay, and let's say one, and then it will print 117

117

this string 10 times. 118

118

So let's start with that. 119

119

And then afterwards, I will show you 120

120

how we can actually update this number here. 121

121

But for now, let's try this out. 122

122

And actually let's comment this code out, 123

123

so that it doesn't get in our way. 124

124

So, comment slash for that. 125

125

And let's go. 126

126

And indeed, we see that the string was printed 10 times, 127

127

that's what this 10 here stands for. 128

128

So the dev tools will not print the same string 10 times, 129

129

it will simply put this 10 here. 130

130

But what matters, is that this logic here actually worked. 131

131

So now, let's actually use this counter variable 132

132

that we created here, to actually increase the number 133

133

in the string that we're printing out. 134

134

So, how do you think we will do that? 135

135

Well, it's actually simple, all we have to do is to replace 136

136

this number here, with the current value of the counter, 137

137

because this variable that we defined here, 138

138

so this rep variable, it's just a normal variable. 139

139

And it's gonna be available here inside of this code block. 140

140

So, let's transform this to a template string, 141

141

so that we can then insert that variable, into the string. 142

142

So, we get rid of the hard coded value. 143

143

And now we basically dynamically built the string. 144

144

And so here, all we need to do is to put the rep variable. 145

145

And now we get exactly what we wrote here manually 146

146

in the beginning, alright? 147

147

So that works. 148

148

And so let's recap exactly what we did here. 149

149

So, we wanted to look our string here. 150

150

So a string like this 10 times, but of course, 151

151

it could be any other repetitive operation. 152

152

Again, we're just using console dot log here, 153

153

so that we can see the result in the developer console. 154

154

Anyway, in order to solve this problem 155

155

of not having to repeat the same code over and over again, 156

156

we use a for loop. 157

157

And so, we initialized the counter of the loop at one. 158

158

So right here, we created this new rep variable. 159

159

And rep again, stands for repetition, but it could be any 160

160

other variable name, of course. 161

161

And so we started at one, because well we wanted to start 162

162

at repetition number one. 163

163

But, we could also start of course, at repetition five. 164

164

So let's see how that looks like. 165

165

And then, as you might have expected, the first repetition 166

166

that's printed is the number five, okay. 167

167

But let's put it back to one now. 168

168

So after each iteration of the loop, we then increase 169

169

this counter value, by exactly one, and this happens 170

170

by the end of the iteration. 171

171

So in the first iteration, this string here is locked to 172

172

the console with the current repetition, 173

173

which stands at one, so this here will be replaced by one 174

174

and then afterwards, the rep counter will be updated to two. 175

175

Then in the next iteration, this same string here 176

176

is printed, but now with rep at number two, 177

177

then rep is updated from two to three, and so on 178

178

and so forth. 179

179

And this loops keep running, while the rep variable 180

180

is less or equal 10. 181

181

So basically, while this condition here is true, and that's 182

182

how we achieve exactly 10 repetitions. 183

183

So, what the loop does, is to verify before each repetition, 184

184

if all condition here still holds true, and only if it does, 185

185

it will keep running the loop. 186

186

So it will execute the next iteration. 187

187

And so it will execute this block of code here 188

188

one more time. 189

189

And of course we could change it to something else. 190

190

Let's put it at 30. 191

191

And then, we should get, indeed 30 repetitions 192

192

of the same string, where only this counter here is changed. 193

193

Alright, and in a nutshell, that's how the for loop 194

194

works in JavaScript. 195

195

In the next few videos, we will see some more useful 196

196

applications of the for loop. 197

197

And also talk about another type of loop 198

198

that we have in JavaScript.