Original subtitles

1 1

Let's start this section 2

2

by learning how numbers work in JavaScript, 3

3

how to convert values to numbers 4

4

and also how to check if certain values are numbers or not. 5

5

And before starting this section, 6

6

go ahead and open up your starter files 7

7

for this section so that we can take a look here 8

8

at the script.js. 9

9

So as I said, in the last section, 10

10

in this one, we will continue working 11

11

on our Bankist application, okay? 12

12

Now, what's different here 13

13

is that now we have actually different data. 14

14

So we have only two accounts now here 15

15

and each account now has a new array, 16

16

which contains the dates of the movements. 17

17

We also have the currency property 18

18

and a locale property. 19

19

Now, right, and so we will use this data 20

20

in later lectures of this section, okay? 21

21

Then down here, we have the complete application 22

22

that we built in the last section. 23

23

And if you want, you can go ahead 24

24

and replace this entire code that I have here 25

25

with your own code from the last section, okay? 26

26

What matters here is that we make the application work 27

27

just as it was working by the end of the last section. 28

28

All right? 29

29

So again, we have the same application, 30

30

only the starter data is a little bit different 31

31

but everything else is the same. 32

32

And so now let's start learning a little bit about numbers. 33

33

And the first thing that you should know about numbers 34

34

is that in JavaScript, 35

35

all numbers are presented internally 36

36

as floating point numbers. 37

37

So basically, always as decimals, 38

38

no matter if we actually write them 39

39

as integers or as decimals. 40

40

So we can show that by doing this. 41

41

So we need a new terminal here. 42

42

And so here is our application back again. 43

43

Let's close this and open up the console. 44

44

Give it some more space 45

45

and so you see that 23 is, in fact, the same as 23.0. 46

46

Okay? 47

47

And that's the reason why we only have one data type 48

48

for all numbers. 49

49

Also, numbers are represented internally 50

50

in a 64 base 2 format. 51

51

So that means that numbers are always stored 52

52

in a binary format. 53

53

So basically, they're only composed of zeros and ones. 54

54

Now, in this binary form, 55

55

it is very hard to represent some fractions 56

56

that are very easy to represent 57

57

in the base 10 system that we are used to. 58

58

So base 10 is basically the numbers from zero to nine, 59

59

while binary is base 2 60

60

and so that's the numbers zero and one. 61

61

Okay? 62

62

So as I was saying, there are certain numbers 63

63

that are very difficult to represent in base 2. 64

64

And one example of that is the fraction 0.1. 65

65

And that then results in very weird results like this. 66

66

And this is kind of a classic 67

67

or a running joke in JavaScript 68

68

because this result should, of course, be 0.3 69

69

and not with all of these zeros here. 70

70

But JavaScript simply has no better way 71

71

of representing this number. 72

72

So in base 10, 73

73

1/10 is simply 0.1. 74

74

And so that's very easy to represent. 75

75

But, for example, if we were trying to do 3/10, 76

76

then that is also impossible to represent for us, right? 77

77

It would be this number here 78

78

and three until infinity, okay? 79

79

And so in binary, the same thing happens with 0.1. 80

80

So we get basically an infinite fraction 81

81

and that then results in a weird result like this one. 82

82

Now, in some cases, JavaScript does some rounding 83

83

behind the scenes to try its best 84

84

to hide these problems 85

85

but some operations, such as this one, 86

86

simply cannot mask the fact 87

87

that behind the scenes, 88

88

they cannot represent certain fractions. 89

89

And by the way, many other languages use the same system. 90

90

For example, PHP or Ruby 91

91

and so don't let anyone make fun of JavaScript 92

92

because of this, okay? 93

93

So we just have to accept that it works this way 94

94

because we really cannot do anything against this. 95

95

So just be aware 96

96

that you cannot do like really precise scientific 97

97

or financial calculations in JavaScript 98

98

because eventually, you will run into a problem like this. 99

99

So .2, which will result in false, 100

100

which, of course, is incorrect as we know. 101

101

This should be true but well, this is simply an error 102

102

in JavaScript that we have to accept, okay? 103

103

All right, now that we know 104

104

how JavaScript represents numbers, 105

105

let's go back to actually working with them. 106

106

So we know how to convert a string to a number, right? 107

107

So that's like this. 108

108

But there's also an easier way. 109

109

So kind of a trick that we can use, 110

110

which is to, or actually this should be a string, 111

111

otherwise that doesn't make much sense. 112

112

But as I was saying, 113

113

there is an easier way, 114

114

which is simply plus 23 the string. 115

115

And this works 116

116

because when JavaScript sees the plus operator, 117

117

it will do type coercion. 118

118

So it will automatically convert all 119

119

the operands to numbers. 120

120

And so therefore, we see 23 here in both these cases. 121

121

So in this purple color, which are numbers. 122

122

So this here makes our code look a lot cleaner 123

123

in my opinion 124

124

and so let's now actually go to our project 125

125

and replace all the occurrences of Number, 126

126

simply with the plus sign. 127

127

So here. 128

128

And if I save it now, the Prettier extension 129

129

should get rid of the parentheses here. 130

130

And it does. 131

131

So here and here. 132

132

And here as well. 133

133

And that should be it. 134

134

Yeah, that's it. 135

135

Great. 136

136

And so our project will work the same 137

137

but the code is a little bit cleaner now. 138

138

Okay, so here we converted strings to numbers. 139

139

But we can also do something called parsing. 140

140

So we can parse a number from a string. 141

141

So on the Number object, 142

142

which is kind of this function here, 143

143

but it's also an object in the end. 144

144

Remember because every function is also an object. 145

145

And this number object here 146

146

has some methods to do parsing. 147

147

So let's use parseInt 148

148

and so here we can now specify a string 149

149

and that string can even include some symbols. 150

150

And JavaScript will then automatically try 151

151

to figure out the number 152

152

that is in this string. 153

153

All right? 154

154

And so here we get 30. 155

155

And this is actually a number. 156

156

It's not a string. 157

157

All right? 158

158

Now, in order to make this work, 159

159

the string needs to start with a number. 160

160

So if we have something like this, 161

161

then it's not gonna work 162

162

and we get not a number. 163

163

Okay? 164

164

So this is a little bit like type coercion 165

165

but even more advanced 166

166

because as we just saw, 167

167

it tries to get rid of unnecessary symbols 168

168

that are not numbers. 169

169

And this can be very useful, for example, 170

170

in this situation where we get some kind of unit from CSS 171

171

and then need to get rid of that unit. 172

172

Now, the parseInt function 173

173

actually accepts a second argument, 174

174

which is the so-called regex. 175

175

And the regex is the base of the numeral system 176

176

that we are using. 177

177

So here we are simply using base 10 numbers. 178

178

So numbers from zero to nine. 179

179

And most of the time, we are doing that 180

180

and so we should always pass in the number 10 here. 181

181

Okay, so that can avoid some bugs in some situations. 182

182

And you see the result here is the same. 183

183

But if we were working, for example, with binary, 184

184

then we would write two 185

185

and then the result would be completely different. 186

186

In this case, we cannot even see it. 187

187

But let's just keep using 10 here. 188

188

So this is with integers. 189

189

So that's what the int here stands for. 190

190

So parse integers but there's also parseFloat. 191

191

So Number.parseFloat 192

192

and let's now try 2.5rem. 193

193

And so now it reads the decimal number here 194

194

from our string. 195

195

So a floating point number. 196

196

Let's see what happens if we used Int. 197

197

And then we only get the integer part, right? 198

198

So it will then stop here at this decimal point 199

199

but that, of course, not what we want. 200

200

And by the way, 201

201

we could even have like some white space down here 202

202

that would not affect anything at all. 203

203

All right? 204

204

Now, by the way, these two functions here 205

205

are actually also so-called global functions. 206

206

So we would not have to call them on Number. 207

207

So this here also works. 208

208

Okay, but this is the more traditional 209

209

and old-school way of doing it. 210

210

Now in modern JavaScript, 211

211

it is more encouraged to call these functions 212

212

actually on the Number object, okay? 213

213

So we say that Number here provides something 214

214

called a namespace, all right? 215

215

So a namespace for all these different functions, 216

216

like parseFloat, and parseInt. 217

217

But anyway, let's now explore another function 218

218

of the Number namespace 219

219

and that is the isNaN. 220

220

So is not a number. 221

221

So Number.IsNotaNumber. 222

222

And we can use this one 223

223

to basically check if any value is a number. 224

224

Well, not any value but more about that later. 225

225

So for example, if we pass 20, 226

226

then here we got false. 227

227

And so is it not a number? 228

228

False, all right? 229

229

So let's try the same with a string. 230

230

20. 231

231

And so here we also get false, all right? 232

232

Because this also isn't not a number. 233

233

It's just a regular value, right? 234

234

But now let's try it by converting something. 235

235

So for example, this string, 236

236

if we try to convert it to a number, 237

237

then this will be not a number. 238

238

Right? 239

239

And so therefore, it is true. 240

240

So let's just do that here. 241

241

So yeah, this works as well. 242

242

And so you see this is, of course, not a number. 243

243

All right? 244

244

But let's try something else. 245

245

Let's, for example, divide 23 by zero 246

246

and maybe you know that dividing by zero 247

247

gives us infinite, okay? 248

248

So dividing by zero is something 249

249

that's not allowed in mathematics 250

250

and so it will give us infinity. 251

251

So infinity is also not not a NaN 252

252

and so therefore, we get false here as well. 253

253

So let me just demonstrate that here. 254

254

So indeed, this gives us this special value of infinity 255

255

that also exists in JavaScript. 256

256

And so this is not a number 257

257

is actually not a perfect way 258

258

for checking if a value is a number 259

259

because it doesn't consider this use case 260

260

and sometimes, this might very well happen. 261

261

And therefore, there is a better method called isFinite. 262

262

So Number.isFinite and let's try it 263

263

with the same numbers. 264

264

So here we get true. 265

265

And okay, and so basically this should be the opposite now 266

266

of this one 267

267

because this is not not a number. 268

268

But it is finite. 269

269

Okay? 270

270

Now, if you try it with 20, 271

271

the string, then here we get false 272

272

because it's not a number. 273

273

And so this is actually better to check 274

274

if something is a number or not. 275

275

And I know this sounds a bit confusing, 276

276

and the confusion comes from the fact 277

277

that we have this weird thing here 278

278

that is also called not a number. 279

279

All right? 280

280

And so therefore, I'm just telling you 281

281

that the isFinite method is indeed the best way 282

282

of checking if a value is a number. 283

283

So a real number, not a string. 284

284

All right? 285

285

So let's try again this one here. 286

286

Trying to convert it 287

287

and we know that this here is not a number. 288

288

So literally, this will be NaN. 289

289

Right? 290

290

And so this should be false as well. 291

291

And it is. 292

292

And now finally, this last use case, 293

293

which gives us infinity. 294

294

And so it is false as well. 295

295

So that's where the name of the method 296

296

actually comes from. 297

297

So isFinite and so infinity is, of course, not finite. 298

298

All right? 299

299

And so this method is the ultimate method 300

300

that you should use to check if any value is a number, 301

301

at least when you're working with floating point numbers. 302

302

So if you are sure 303

303

that you just need to check for an integer, 304

304

then you can use isInteger as well. 305

305

So let me just write here a comment as well. 306

306

So this one you should only use 307

307

to check if value is not a number. 308

308

So literally, not a number this value. 309

309

Okay? 310

310

But usually, in practice, 311

311

I never use this. 312

312

Whenever I need to check for a number, 313

313

this is the one to go 314

314

or if I'm using integers, 315

315

then I use isInteger as I was just saying before. 316

316

So we can do this. 317

317

Also this is also an integer remember 318

318

and so both are true, okay? 319

319

But then, of course, if we try this here, 320

320

it will be false. 321

321

Now, in our project that we're currently building, 322

322

there's not really a need to check 323

323

if any of the inputs is really a number or not 324

324

and so in this particular case, 325

325

we don't need to go back and change anything 326

326

but it's still good to know about, 327

327

especially this method here. 328

328

So this is your go-to 329

329

whenever you need to check 330

330

if something is a number or not. 331

331

And going back here, 332

332

the parseFloat function should be your go-to 333

333

whenever you need to read a value out of a string. 334

334

For example, coming from CSS. 335

335

So then you always get this 336

336

and it's very nice to be able 337

337

to read the number out of the string.