Original subtitles

1 1

Let's now learn 2

2

about some more mathematical operations 3

3

and also about rounding numbers. 4

4

And we have already been using 5

5

lots of mathematical operations, 6

6

for example plus, minus, times, divided, 7

7

exponentiation and so on. 8

8

And so we don't need to go over these again. 9

9

So let's start here with the square root. 10

10

And so just like many other functions 11

11

the square root is part of the math namespace. 12

12

So Math.sqrt, so this stands for square root. 13

13

And so all we need to do, is to pass in the number 14

14

and then it will give us the square root. 15

15

And the same could be achieved 16

16

using the exponentiation operator as well 17

17

by doing one divided by two. 18

18

And so that two is the square. 19

19

So we want the square root. 20

20

So we use one divided by two, 21

21

and actually we have to put this into parenthesis 22

22

and now it works, all right? 23

23

And the same would work for a cubic root 24

24

for example of eight, which would be two. 25

25

And so actually this is I think the only way 26

26

you could calculate a cubic root if you need it. 27

27

Next up, let's get the maximum value 28

28

of a couple of values, okay. 29

29

So again, we use Math.max this time. 30

30

So let's just use a couple of numbers here. 31

31

And so as the name says, 32

32

the maximum value gets returned to us. 33

33

And this max function here actually does type coercion. 34

34

So it should now still give us 23, okay? 35

35

However, it does not parsing. 36

36

So if we try 23 pixels for example, 37

37

it will then result in not a number. 38

38

So this does not work, all right? 39

39

And just as we have max, we also have min, 40

40

let's just put it back to 23. 41

41

And now here we get two, all right? 42

42

Now, besides a couple of methods, 43

43

there are also constants on the math object 44

44

or on the math namespace. 45

45

And so for example, 46

46

if we wanted to calculate the radius of a circle 47

47

with 10 pixels, we could do that. 48

48

So for that, we use Math.PI. 49

49

And for now let's just take a look at that. 50

50

And so it is this constant that you might know probably. 51

51

And so again, let's say that we get like 10 pixels 52

52

from the user interface. 53

53

So we can say parseFloat 54

54

of 10 pixels, 55

55

and then we simply have to square this value. 56

56

This is how we calculate the area of a circle 57

57

with this radius, all right? 58

58

Now another thing that is on the math object 59

59

is the random function 60

60

that we already have been using a couple of times. 61

61

And it's very important to be able to generate 62

62

good random numbers when we need them. 63

63

So before we have already created random dice rolls. 64

64

Remember, so that we did by Math.random. 65

65

And so this will give us a number between zero and one. 66

66

So as I reload, you see, I get different values. 67

67

Then we multiply this by a six. 68

68

And then we removed basically the decimal part 69

69

by doing Math.trunc on like this, okay? 70

70

Now the problem with this was 71

71

that then the highest number could be five. 72

72

And so we simply edit plus one 73

73

to offset that truncation here. 74

74

so that cutting off of the decimal part. 75

75

And so now we're gonna get values here 76

76

between really one and six. 77

77

But now let's actually generalize this formula 78

78

so that we can use it from now on 79

79

to always generate random integers between two values. 80

80

So let's create randomInt 81

81

and we want to pass in a minimum and a maximum, 82

82

and then we want to return that number. 83

83

So as always, we need to start by removing any decimal parts 84

84

of the result of Math.random. 85

85

And then we will multiply this Math.random 86

86

by max minus min okay? 87

87

And then we add that one back on. 88

88

And so let me show you why we do this. 89

89

So it is because, it gives us a number between zero and one. 90

90

So Math.random is between zero and one, right? 91

91

So if we multiply this by max minus min 92

92

then we get a number between zero and max minus min, okay? 93

93

And now if we add min to all of this, 94

94

so the minimum value, 95

95

then we get min to max minus min plus min. 96

96

So we added min on both sides here, 97

97

basically of the equation. 98

98

And so then we can cancel this minus min plus min, 99

99

and we end up with a range between the minimum 100

100

and the maximum value that we specified, all right? 101

101

So let's just add that here as well. 102

102

So adding that minimum 103

103

that I just explained to in his last step. 104

104

And so this is how we end up with a nice function 105

105

which will give us always a number 106

106

that's going to stay between min and max. 107

107

So let's try that out. 108

108

So randomInt, let's say between 10 and 20 109

109

and so here we see 20 and let's try it a couple of times. 110

110

So I'm gonna save this file here a couple of times, 111

111

and you'll see that all of these results 112

112

are always within this range. 113

113

Now I maybe overdid it, 114

114

probably it's easier to just reload this page, all right? 115

115

So we haven't seen any 10 or any 11 yet, 116

116

but it's gonna work just fine 117

117

and we will get it if we reload it even more times, okay? 118

118

Next up, let's talk a little bit about rounding 119

119

and let's start by rounding integers. 120

120

So you can add some comments to this here 121

121

if you want, but I'm just gonna leave it like this. 122

122

I will just add here rounding integers. 123

123

And so we have already been using math.trunc, right? 124

124

So what this does, is to simply remove any decimal part 125

125

and so we end up with 23 here, right? 126

126

Let's just take this one out, all right? 127

127

So again, this one simply removes any decimal part always, 128

128

but we have also other ways. 129

129

So we also have round, so math.round. 130

130

And so this one will always round to the nearest integer. 131

131

So this one is gonna be 23 and the other one 24. 132

132

Let's duplicate us a couple of times 133

133

to save us some time. 134

134

Then we also have ceil 135

135

and this one will basically round down. 136

136

So both of these results should become 24. 137

137

And so that's these two here. 138

138

So line 318 and 20, 139

139

or actually it's these two. 140

140

So I'm confusing these numbers, all right? 141

141

So both of these are 24, 142

142

because they will both always be rounded up. 143

143

And then we also have floor. 144

144

And so these two will both be rounded down to 23. 145

145

And so that's what we get here. 146

146

And by the way, all of these methods, 147

147

they also do type coercion. 148

148

So if we do this, then it's gonna work just the same. 149

149

Now you might think that floor and trunc are very similar. 150

150

Let me just put this one down here. 151

151

And indeed they do the same 152

152

when we are dealing with positive numbers. 153

153

So basically floor and trunc, both cut off the decimal part 154

154

when we are dealing with positive numbers. 155

155

However, for negative numbers, it doesn't work this way. 156

156

So let me compare them here. 157

157

So trunk minus this and also floor, okay? 158

158

And so now this one here, 159

159

just like before it gets truncated. 160

160

So it simply removes this part, 161

161

but floor now gets rounded to minus 24. 162

162

Because with negative numbers, 163

163

rounding works the other way around. 164

164

And so actually a floor is a little bit better than trunc 165

165

because it works in all situations, 166

166

no matter if we're dealing with positive 167

167

or negative numbers. 168

168

And so here, let's go ahead and replace this with floor. 169

169

So we're looking for a really generalized function here. 170

170

So this randomInt function should work in all situations 171

171

even if we give it a negative inputs here. 172

172

And so therefore, we need to work with floor here, 173

173

All right, so that's rounding integers. 174

174

Let's talk about a floating point numbers 175

175

or we can also say decimals. 176

176

And now with decimals, 177

177

it works in a little bit different way. 178

178

So let me show you how. 179

179

So in decimals, 180

180

we have to specify the number like this in parenthesis. 181

181

And then on that number, we call the toFixed method, okay? 182

182

And let's try it here with zero first, 183

183

just so we can see the result. 184

184

And so you see that with the zero, 185

185

it is converted to three, 186

186

but this three is a white here 187

187

while these other ones are pink or purple. 188

188

And so this means that is actually a string, right? 189

189

So toFixed will always return a string and not a number. 190

190

And that's important to keep in mind. 191

191

So if we start here instead of zero to three, 192

192

then it returns to 0.7 and it adds zeros 193

193

until it has exactly three decimal parts. 194

194

Just like we specify it here, all right? 195

195

Now let's add something more here, 196

196

like two, three, four five. 197

197

And let's say we only want two decimal places here now. 198

198

So this should become 2.35, and indeed it does, okay? 199

199

And if we now wanted to convert this result to a number, 200

200

then we simply would have to add the plus sign here. 201

201

And then we already know 202

202

that this here converts a string to a number. 203

203

And indeed now it is purple again. 204

204

So with decimals it works differently 205

205

than with integers and debts. 206

206

Once again, because things in JavaScript 207

207

evolved kind of in a weird way in this kind of old language. 208

208

And if the language was designed today 209

209

and definitely this would be very different 210

210

but now this is what we have to work with right now, okay? 211

211

Just keep in mind 212

212

Does this here works 213

213

in a similar way than the string methods? 214

214

So this is a number, so it's a primitive, right? 215

215

And primitives actually don't have methods. 216

216

And so behind the scenes, JavaScript will do boxing. 217

217

And boxing is to basically transform this 218

218

to a number object, then call the method on that object. 219

219

And then once the operation is finished 220

220

it will convert it back to a primitive, okay? 221

221

All right, So once again, 222

222

this lecture looked a little bit like a reference 223

223

of a couple of different methods, 224

224

but to make it a bit more fun 225

225

let's now apply some of this to our bankers project. 226

226

And the first thing that I want to do 227

227

is to round the requested loan amount. 228

228

So this one here, so this looks weird. 229

229

Oh, it's because of this number. 230

230

Now okay, So we could use this application 231

231

in this other page here on the other side 232

232

but I prefer to have everything here in one screen. 233

233

But anyway, I can take a loan, like this, right? 234

234

With the decimal part. 235

235

But in practice, I've never seen a bank 236

236

giving out the loan like this. 237

237

And so that's applied to rounding 238

238

to the loan functionality. 239

239

So that's here and the rounding 240

240

then needs to happen right here. 241

241

So the value that we get from the loan here 242

242

needs to be rounded down, okay? 243

243

And then we actually do not need 244

244

to convert it to a number 245

245

because as I showed you before, the math.floor method 246

246

actually does type coercion itself, okay? 247

247

And we are using floor here 248

248

because we simply want to round any value down, all right? 249

249

So in this case it would have been 150 and that's it. 250

250

So let's try that again now. 251

251

So let's ask for 150.56. 252

252

And so now we get just this, okay? 253

253

Probably I added one more zero there 254

254

but that doesn't matter. 255

255

Next up, let's use the toFixed function or method 256

256

to make our numbers here look a little bit nicer. 257

257

So here for example, we have this decimal part 258

258

with the two numbers 259

259

but here then we only have the 0.9. 260

260

And so this would be like 0.90 261

261

and here it should be 1300.00. 262

262

And the same also up here, all right? 263

263

So for that we can use the toFixed function 264

264

that we just learned about. 265

265

And so let's do that in all the places 266

266

where we display numbers on the screen. 267

267

And so that's in, in these three functions. 268

268

So displayMovements, DisplayBalance, and DisplaySummary. 269

269

So let's start here at the top. 270

270

And so here we have the first occurrence. 271

271

So this movement here is a value. 272

272

So it's a number that we display. 273

273

And so on here, we can simply call so .toFixed, 274

274

and then with two decimal parts, now right? 275

275

Now, let's just copy this from here. 276

276

So DisplayBalance, So let's do the same here 277

277

and the same in the summary. 278

278

And so that will then hopefully also fix 279

279

this weird, really long number 280

280

that happens because of the rounding errors in JavaScript 281

281

that I just explained to you in the previous lecture. 282

282

So everywhere we print a number, I will do this now, okay? 283

283

Then also on this result and also on the interest. 284

284

Let's give it a safe 285

285

and that's a lot better. 286

286

So it worked, you see now we get 0.00, 287

287

and here we also get to nicely 0.90. 288

288

And the same down here, 289

289

we are now back to having just two decimal places 290

290

just as we requested so to say. 291

291

So this lecture was kind of a short overview 292

292

of some more math functions including rounding 293

293

and also some other stuff 294

294

like getting the max and the min value and yeah. 295

295

So good to know functions. 296

296

And of course there are a lot more. 297

297

So if you need something 298

298

like logarhythmical functions or sinuses, 299

299

then of course you can always check out 300

300

the MDN documentation.