Original subtitles

1 1

And here goes the final coding challenge 2

2

of this section. 3

3

And in this one, let's improve the tip calculator 4

4

that we created earlier 5

5

but this time using loops. 6

6

So here is what I want you to do, 7

7

first create an array called bills, 8

8

which will contain the 10 test values 9

9

that we have down here. 10

10

Then create empty arrays for both the tips and the totals. 11

11

And so these arrays should be called tips and totals. 12

12

And if you need more details about this challenge, 13

13

you can always go back to the code of the previous version 14

14

that we wrote of this. 15

15

Then in number three, 16

16

use the calcTip function that we wrote before. 17

17

And so go back to that challenge really, 18

18

and copy the function from there. 19

19

There is no need to repeat the same code. 20

20

So use that function to calculate both the tips 21

21

and the total values for every single bill value 22

22

that is in the bills array we created in number one. 23

23

And to do that of course 24

24

use a four loop just as we learned 25

25

over these few last lectures. 26

26

And to my hint to help you a little bit 27

27

with this in case you need it 28

28

is to call the calcTip function inside the loop 29

29

and then use the push method to keep adding values 30

30

to the tips and the totals arrays. 31

31

All right? 32

32

So that's the basic challenge 33

33

and hopefully you can solve it 34

34

even if you need to consult the code that we wrote earlier, 35

35

there's absolutely no problem. 36

36

So there's no need to memorize anything. 37

37

All you need is to understand. 38

38

And so if you understood what we did up until this point, 39

39

you should be able to look at the code that we wrote 40

40

and then change that in order to fit this challenge. 41

41

Now, if you want to challenge yourself even more 42

42

and basically push what we learned to the limit, 43

43

then I have a bonus question 44

44

and here I want you to write a function calcAverage, 45

45

which will take an array called arr as an argument, 46

46

and dysfunction will calculate the average 47

47

of all the numbers and the array that had received. 48

48

Now, let me tell you that this is a very difficult challenge 49

49

for you at this point 50

50

because we haven't done anything like this before, okay. 51

51

So, if you don't want to get frustrated or something 52

52

then there's no need to try this one. 53

53

You can just watch the solution at the end of this video 54

54

but if you still want to attempt how to do it, 55

55

here are the steps 56

56

how to solve it to make it a bit easier. 57

57

So first of all, 58

58

you will need to add up all the values in the array 59

59

that a function receives. 60

60

And to do that, 61

61

you start by creating a variable called sum 62

62

and set it to zero 63

63

and then you will loop over the array using a four loop. 64

64

And in each iteration 65

65

you will add the current value of the array 66

66

to the sum variable. 67

67

And by doing this you will end up with all the values 68

68

in the array added together. 69

69

And then to calculate and return the average, 70

70

all you have to do is to divide the sum 71

71

that you just calculated by the length of the array, 72

72

because that is the number of elements. 73

73

So for example, if the array had just two values, 74

74

like 10 and 20, 75

75

we would add them together, 76

76

they would be 30 and then divided by the number of elements 77

77

in the array. 78

78

And so that would be two 79

79

and so the result would be 15. 80

80

Okay. That's how you create the calcAverage function. 81

81

And then I want you to use that function 82

82

on the totals array. 83

83

All right. 84

84

So basically I want you to calculate the average 85

85

of all the total values of the tips plus bills. 86

86

Okay. 87

87

So again don't beat yourself up if this bonus one 88

88

is too hard for you. 89

89

Anyway, good luck with this one, 90

90

and I see you here again in a minute. 91

91

Okay. 92

92

And let's start by grabbing 93

93

the calcTip function from earlier. 94

94

So that should be here. 95

95

Okay. 96

96

And that's why we keep all the code 97

97

in one neat file like this. 98

98

Next up we create the bills array, 99

99

and this one has quite a number of values, 100

100

but we can just copy them. 101

101

They're already almost in the correct format. 102

102

So, no and but a comma 103

103

then we create the empty tips and totals const 104

104

tips equals an empty array 105

105

and const totals, 106

106

another empty array. 107

107

And now is where the magic starts, 108

108

So basically where we will calculate 109

109

the tips and the totals, 110

110

so that is the question number three. 111

111

So use calcTip to calculate tips and total values. 112

112

So essentially what we will do is to loop 113

113

over the bills array and then fill up these two arrays. 114

114

So, for let i equals zero, 115

115

and we want this to run while the counter 116

116

is less than the length of the bills, 117

117

which is 10 118

118

and so the last index is nine, 119

119

and so that's the last element that's gonna be taken. 120

120

And now in here let's start by calculating the tip 121

121

and store it in a variable. 122

122

So const tip 123

123

is equal and now we're using the caLcTip function. 124

124

So we call it using parenthesis, 125

125

and now we need to pass in the bill value. 126

126

And what is the bill value? 127

127

Well, it is just a bill's array at the current position. 128

128

And now you might wonder 129

129

why I am able to declare 130

130

this tip variable here as a constant. 131

131

Am I not changing it in every loop iteration? 132

132

Well, actually that's not what happens, 133

133

actually in each iteration, 134

134

a new tip variable is gonna be created. 135

135

So we're not mutating, 136

136

we're not changing the original tip that we declare here, 137

137

in each iteration we will simply create a new one 138

138

and that's why we can't use const. 139

139

Anyway, now we have the tip calculated 140

140

and so we just need to push it into the tips array, 141

141

so tips dot.push, 142

142

and tier the tip, 143

143

and finally we need to push into the totals, 144

144

so total.push, tier tip plus the current bill 145

145

and we already know that is bills i. 146

146

Okay. And that's actually it. 147

147

Now you could have done it in a different way, 148

148

for example without this variable here at all, 149

149

you could have just put this code here and here, 150

150

but then you would have calculated the value twice 151

151

and that's just not necessary. 152

152

We just calculated once 153

153

and then we use it, 154

154

both to push the value into the tips 155

155

and into the totals. 156

156

Okay. And now as always, 157

157

let's check all the three arrays out in the console 158

158

and that's a lot of numbers, 159

159

but just by quickly looking at them, 160

160

everything looks correct. 161

161

Great. That's really great. 162

162

We basically just did the same 163

163

as we did in the previous version of the challenge. 164

164

But this time we did it using a loop 165

165

instead of manually creating the array 166

166

by calling calcTip with bills zero one and two. 167

167

So that's what we did in a previous challenge, 168

168

but this one is a lot better 169

169

because now no matter how many bills we have here, 170

170

the loop will take care of all of them 171

171

at the same time basically. 172

172

Okay. So that's the basic challenge. 173

173

I hope you arrived at the same result 174

174

that I did no matter how you solved it. 175

175

And now let's go for the bonus here. 176

176

So we're writing a function called calcAverage, 177

177

const calcAverage. 178

178

And once again I'm using a function expression here, 179

179

which is my favorite kind of function I would say. 180

180

And as we said, we will receive an array 181

181

and any array here will work. 182

182

So once again, we're building a generic function 183

183

which does not care what kind of values 184

184

it's gonna receive. 185

185

It can receive bills or tips 186

186

or scores or heights or masses 187

187

or whatever really. 188

188

It doesn't care what the values are. 189

189

And that's also why I gave it this generic name, 190

190

so it's just calcAverage 191

191

and not for example calcAverage totals. 192

192

Let's not do what we say or what I say here in 4.1, 193

193

which is to start creating sum variable 194

194

that starts at zero. 195

195

Then as we loop over the array, 196

196

we will keep adding the current value to that variable. 197

197

So, this time it needs to be alert 198

198

because this sum will of course be updated 199

199

as we loop over the array. 200

200

And now all of this is pretty standard at this point. 201

201

So equals zero, 202

202

i should stay below 203

203

the array.length. 204

204

And so at this time array is simply the array 205

205

that we're receiving in this function, 206

206

so it's this parameter 207

207

And now as I said, 208

208

as we loop over the array, 209

209

we will keep adding the current value to the sum. 210

210

So what I mean is some will be equal 211

211

to current value of sum, 212

212

plus the array that we received as an input 213

213

at to current position 214

214

and that's it. 215

215

We're just missing here, 216

216

the increment of the counter 217

217

but that's easy to fix. 218

218

And this one here could be even more condensed. 219

219

So let me just copy this one, 220

220

and comment out the original one, 221

221

because remember that we have a more shorthand operator 222

222

in JavaScript, 223

223

which we can use when we want to update a value. 224

224

So instead of sum equals, sum plus, 225

225

remember we can write some plus equal array i. 226

226

So this one is exactly the same as this. 227

227

So if you prefer, you can write just this version, 228

228

but this here is gonna do exactly the same thing. 229

229

Okay. 230

230

And just to see if this works, 231

231

let's actually test this now for now 232

232

by logging only the sum. 233

233

So console.log sum, 234

234

and now again to test it, 235

235

I will just call the function calcAverage 236

236

with simply an array of sum values, 237

237

so two plus three, plus six, 238

238

and we know that this will be 11, right? 239

239

And so now we can test this function here 240

240

just to see if this first part that we just wrote works. 241

241

Let's see, 242

242

and yes we get 11. 243

243

And so this logic here is correct. 244

244

So we got this array here into the function. 245

245

Okay. And so arr is now two, three, six 246

246

and so that's the array that we are done looping over. 247

247

Okay. So we end up with the sum 248

248

and now what we want to return 249

249

is simply the sum divided by a number of elements 250

250

in the array, 251

251

which remember is arr.length. 252

252

And that's it. 253

253

We can now get rid of this, 254

254

but now we need to lock the result to the console 255

255

if we want to see it, 256

256

because this function here now does not log it, 257

257

it simply returns it. 258

258

And remember that is a big difference. 259

259

So we know that some of this is 11 260

260

and 11 divided by three 261

261

is something like close to four. 262

262

So we could change this here to seven 263

263

then sum would be 12 and 12 divided by three is four. 264

264

And so then we can make sure that this function works. 265

265

So, it is four. 266

266

So, great. 267

267

This means that the function now works. 268

268

And so now we can use this function 269

269

to actually calculate the average total. 270

270

And so here we simply use the totals value 271

271

that we already created before. 272

272

And that's it. 273

273

So, the average total value of all our bills plus tips 274

274

is 275 and 19. 275

275

And let's actually do the same 276

276

with the tips themselves, 277

277

just to get an idea of the kind of tips that were paid here. 278

278

So the average tip is 4289. 279

279

Hopefully that partier was, 280

280

not too confusing, 281

281

but if you go slowly through the code step by step, 282

282

you will understand it. 283

283

All right. 284

284

And with this, 285

285

we finished the complete JavaScript fundamentals. 286

286

So we made a ton of progress here. 287

287

So congratulations for making it this far. 288

288

Great job really. 289

289

However, as you know 290

290

we are really just getting started here, 291

291

there is so much more to learn 292

292

and actually in the next section, 293

293

we will quickly configure our VS code editor 294

294

a little bit better 295

295

and also set up a better development environment. 296

296

So that's gonna be super useful 297

297

for writing code a little bit faster, 298

298

and I will also teach you some developer skills 299

299

that every developer should really have 300

300

but as always before moving on, 301

301

make 100% sure 302

302

that you understood all these fundamentals 303

303

from this section and to previous section. 304

304

So, if you want you can redo the challenges 305

305

or you can come up with your own small problems 306

306

or ideas to solve. 307

307

And by doing that you will reinforce 308

308

all these tools even better 309

309

and ultimately become a better developer faster. 310

310

Then when you're really ready, 311

311

let's together move forward.