Original subtitles

1 1

In this video, we need to go back to value types. 2

2

So types are one of the fundamental aspects in programming 3

3

and converting between types, 4

4

is something that we do in every programming language. 5

5

For example, converting a string to a number 6

6

or a number into a Boolean 7

7

is something that we do all the time. 8

8

And so it's important that we learned about this 9

9

before being able to move on further in the course. 10

10

That's specially true for a language like JavaScript, 11

11

which sometimes behaves in a weird way 12

12

as we will see in this video. 13

13

Now in JavaScript, 14

14

there is type conversion and type coercion. 15

15

So they sound very similar, but are different. 16

16

So type conversion is when we manually 17

17

convert from one type to another. 18

18

On the other hand type coercion is when JavaScript 19

19

automatically converts types behind the scenes for us. 20

20

So that's necessary in some situation, 21

21

but it happens implicitly, 22

22

completely hidden from us. Okay? 23

23

So let's start with type conversion, 24

24

which remember, is when we explicitly 25

25

want to convert from one type to another. 26

26

So let's say that we have an input field 27

27

on a webpage for the user to input their birth year. 28

28

And these inputs from input fields usually come as strings. 29

29

So let's say that the input year 30

30

that we get from the user interface 31

31

is a string with the value 1991. 32

32

But now if we want to do some calculations with this, 33

33

this won't really work. 34

34

So let me show that to you. 35

35

So console dot log, 36

36

let's say input year and now plus 18. 37

37

And so like this, we can calculate in what year 38

38

the person will become of full age. 39

39

Now remember that when we have a string 40

40

and add something to the string, 41

41

it will basically concatenate a strings. 42

42

So we can't expect that this 43

43

actually adds 18 to this number here 44

44

because it's a string. 45

45

So let me show you what I mean with that. 46

46

And so indeed, we now get a string 47

47

which basically contains the 1991 string 48

48

and then the 18 as well. Okay? 49

49

So we need a way of fixing this, 50

50

which means that we need a way 51

51

of converting this string to a number. 52

52

So let me actually log that here first. 53

53

So console dot log, 54

54

and then the way we convert 55

55

this string to a number is by using 56

56

the built in number of function. 57

57

So we write number, then parenthesis and then input here, 58

58

and we will learn exactly what a function is 59

59

and why it works this way in the next section. 60

60

For now, just know that 61

61

we can basically convert strings to numbers 62

62

by using this function, 63

63

which we execute using these parenthesis here. 64

64

So we have this parenthesis inside these parenthesis now, 65

65

but don't get confused by that. 66

66

So doing this operation here 67

67

will then return the string as a number. 68

68

So let me show that to you. 69

69

And so indeed now we get 1991 70

70

here in this pink color basically. 71

71

And the colors might change throughout the time. 72

72

By the time I record this video, 73

73

numbers are pink and strings are just this white, 74

74

let me actually print them both. 75

75

And so that should make it really visible that, yeah. 76

76

The first one is a number, the second one is a string. Okay. 77

77

But now one thing that's really important to note here 78

78

is that the original value, is actually not converted. 79

79

So the input year variable itself. 80

80

So this one is still a string, right? 81

81

It still holds the variable 1991 82

82

as a string and not as a number. 83

83

That's why down here in this log 84

84

where we do this calculation, 85

85

the result is still this string. 86

86

Because again, the original input year variable 87

87

is still a string. 88

88

Using this number function, 89

89

will simply give to us a converted version. 90

90

So if you want to perform this calculation, 91

91

we need to use number here as well. 92

92

And so this will now convert a number 93

93

and then to that number, the 18 will be added. 94

94

And so now we should end up 95

95

with something like 2009, I guess, 96

96

and indeed that's right. 97

97

But now what if we're trying to convert something 98

98

to a number that is impossible to convert. 99

99

Let's try that with a string 100

100

that doesn't really contain a number. 101

101

So let's try to console log, converting to a number, 102

102

the string Jonas. 103

103

So JavaScript, we'll look at a string, 104

104

will try to convert it to a number, 105

105

but it won't really work. 106

106

So what do we get instead? we get this non. 107

107

Which stands for not a number. 108

108

So a JavaScript gives us this, not a number value 109

109

whenever an operation that involves numbers 110

110

fails to produce a new number. 111

111

So basically not a number actually means invalid number. 112

112

It's not really not a number. 113

113

And let me actually prove that to you. 114

114

So we can check the type of NaN, so not a number. 115

115

And as we will see the weird result of this 116

116

is that the type of not a number is actually number. 117

117

And so again, not a number 118

118

actually means an invalid number. 119

119

It's still a number of somehow, but it's an invalid one. 120

120

And so again we get not a number 121

121

whenever an operation involving numbers, 122

122

fails to give us a new number. Okay. 123

123

So that is converting strings to numbers, 124

124

but of course we can also do the opposite. 125

125

It's a little bit less important, I would say, 126

126

but I still want to show it to you. 127

127

So to do it the other way around, 128

128

we use this string function. 129

129

And that's quite straightforward, right? 130

130

Just keep in mind that 131

131

we need to really start it with a capital S 132

132

just like here the number function, 133

133

needs to start with a capital N. 134

134

Otherwise it's not gonna work. 135

135

So we get 23. 136

136

and remember that whenever the value here is white, 137

137

then it means it is a string. 138

138

So it looks kind of the same. 139

139

Let's again, log both just to make this point. 140

140

So the pink one is the value 141

141

that actually has the number type, 142

142

and this one has the string type. 143

143

Okay. So again, this one is not as important, 144

144

but I still wanted to mention it. 145

145

Now, JavaScript can only convert two, three types. 146

146

So we can convert to a number, 147

147

to a string or to a Boolean. 148

148

But we cannot, for example, 149

149

convert something to undefined or to no. 150

150

That doesn't make a lot of sense. 151

151

Now here, we only converted to numbers 152

152

and to strings, but not two Booleans. 153

153

And that's because Booleans behave in a special way. 154

154

And for that reason, there is a separate lecture coming up 155

155

on so-called "truthy" and "faulty" values. 156

156

Great. So that is type conversion 157

157

where we do manually convert from one type to another. 158

158

However, in practice, 159

159

we rarely have to do it manually 160

160

because JavaScript actually does type coercion 161

161

automatically for us in many situations. 162

162

So let's talk about that now. 163

163

And let's just separate this here with some comments, 164

164

so type conversion and then type coercion. 165

165

So basically type coercion happens 166

166

whenever an operator is dealing 167

167

with two values that have different types. 168

168

So in that case, 169

169

JavaScript will then, behind the scenes, 170

170

convert one of the values to match the other value 171

171

so that in the end, 172

172

the operation can be executed. 173

173

And actually we already saw that happening, 174

174

if you think about this. 175

175

So let me show that to you, 176

176

starting with strings. 177

177

Remember how we did this. 178

178

I am, and then a number, let's say 23 179

179

and then another plus, years old. 180

180

So we already know that this is gonna produce a string 181

181

that says I am 23 years old. 182

182

But how does that actually work? 183

183

Because 23 is a number. 184

184

So we have different types here, right? 185

185

We have a string, a number and another string. 186

186

So let's check. And indeed, that is what happens. 187

187

And it works this way because of type of coercion. 188

188

So in JavaScript, the plus operator that we used here 189

189

triggers a coercion to strings. 190

190

And so whenever there is an operation 191

191

between a string and the number, 192

192

the number will be converted to a string. 193

193

So thanks to type coercion, 194

194

writing this would be exactly the same as writing this. 195

195

Right? Because again, 196

196

the plus operator will convert numbers to strings. 197

197

And the same actually happens in template literals. 198

198

It also takes all the number of values 199

199

and also converts them to strings. 200

200

Now, if JavaScript did not have automatic type coercion, 201

201

like many other languages don't, 202

202

then we would have to manually do this 203

203

like we just learned before. 204

204

Then we would have to do string 23. 205

205

And then this would be the only way that this would work. 206

206

But luckily for us, Javascript has type coercion 207

207

and so this will happen completely 208

208

automatically behind the scenes. 209

209

Now, actually not all the operators 210

210

do type coercion to string. 211

211

So let me show you something else. 212

212

So if we do 23 to string, minus 10 to string, minus three, 213

213

what do you think will happen now? 214

214

So, let's actually check and it gives us 10. 215

215

So what happened here? It looks like this time, 216

216

JavaScript converted the strings, to numbers. 217

217

And indeed, that's why we get 10, 218

218

because 23 minus 10 is 13, minus three is 10. 219

219

And so what this means is that the minus operator 220

220

actually triggers the opposite conversion. 221

221

So in this case, strings are converted to numbers 222

222

and not the other way around. 223

223

So instead if we use the plus, 224

224

what do you think is going to happen? 225

225

10 to three is converted to a string 226

226

and then the three strings are concatenated. 227

227

Okay? So this is a very important distinction 228

228

to keep in mind because this actually confuses 229

229

many JavaScript beginners when they don't know about this. 230

230

So let's try another one here. 231

231

And I'm again, using 23 the string, times two the string. 232

232

And again, you will see that these values 233

233

are gonna be converted to numbers before. 234

234

And indeed, that's why we get 46 235

235

because both of them are now converted to numbers. 236

236

'cause that's the only way that 237

237

the multiplier operator can work. 238

238

And the same of course is true for dividing. 239

239

Now, one final example is a logical operator. 240

240

So let's check 23, the string again, 241

241

greater than 18, the string. 242

242

So, do you think this is going to work? 243

243

Yes, it does. 244

244

So 23, the string is still greater than 18 the string, 245

245

because once more JavaScript will convert strings 246

246

to numbers automatically. 247

247

The only way in which it doesn't do that 248

248

is the plus operator and plus operator again, 249

249

it happens the other way around. 250

250

All the numbers are converted to strings. 251

251

Okay. I hope that distinction is now pretty clear. 252

252

So just to make sure that you really got it, 253

253

let's play a game called "guess the output." 254

254

So that's a game I just made up. 255

255

So I want you to guess what happens here. 256

256

So I will write one plus one like this, 257

257

and then we say n equals n minus one again. 258

258

So what do you think n we'll look like 259

259

when we log it to the console? 260

260

So essentially we start with one the string, 261

261

then we add one, and then we subtract one. 262

262

So take a moment to think what this should look like. 263

263

And then let's take a look at the solution and it is 10. 264

264

So that's a bit counterintuitive, 265

265

but according to the rules that we just learned before, 266

266

it actually makes sense. 267

267

So here in the first line, 268

268

one plus one will actually turn out to be 11, the string, 269

269

because we have one string here and then the plus operator 270

270

will automatically convert a number to a string. 271

271

And so the result of this one is the string, 11. 272

272

But then here we have the minus operator 273

273

and in the minus operator, 274

274

whenever we have a string or more strings, 275

275

it will then convert it to a number. 276

276

And so here, the string 11 will be converted 277

277

to 11 the number and then 11 minus one is of course 10. 278

278

Okay. Let's do one or two more 279

279

and let's do it in the console here. 280

280

And we can actually clear the console 281

281

of all this clutter here by clicking on clear console. 282

282

Okay? So let's do two plus three 283

283

plus four plus five the string. 284

284

And now you actually can really guess 285

285

because we can already see the solution there. 286

286

Okay? So let's try to understand what happened here. 287

287

So we start here with two plus three, 288

288

which makes five, then five plus four makes nine. 289

289

And then we end up with nine plus five the string. 290

290

And then as you already know, since we have a string, 291

291

the plus operator will convert the other operand, 292

292

which is nine, also to a string. 293

293

And then we end up with nine, five as a string. 294

294

Okay. And another one, 10 minus four minus three, 295

295

And keep in mind that these are strings, 296

296

and then minus the real number two, 297

297

but then plus five to string. 298

298

So again, this looks very weird, 299

299

but the logic is kind of the same as before. 300

300

So we have two values that are subtracted, 301

301

and so JavaScript will convert in both to numbers. 302

302

And so the result of this is six, 303

303

then six minus three is three, 304

304

then three minus two is one. 305

305

And then we end up with the same situation as before. 306

306

So this one will be converted to a string 307

307

and then we end up with a string 15. 308

308

Okay. And with that, 309

309

I think a this would be pretty clear now. 310

310

And you might be wondering, 311

311

why we're talking so much about this. 312

312

But it's really important 313

313

that you know about this right from the start 314

314

so that you can write your code with all of this in mind. 315

315

Now, many people actually don't like type coercion 316

316

and think that it's a bad practice to rely on type coercion. 317

317

One reason for that is that type coercion can in fact, 318

318

introduce many unexpected bugs into our program. 319

319

However, this only happens 320

320

when we don't really know what we're doing. 321

321

So when we don't know about the stuff 322

322

that it just showed you. 323

323

Because if you know, then it's way easier 324

324

to avoid these errors. 325

325

So in my opinion, coercion is actually a great mechanism 326

326

that is going to allow us to write a lot less code 327

327

and also to write more readable code. 328

328

So really make sure to take some time 329

329

to understand how type coercion works 330

330

and then just embrace it in your code.