Original subtitles

1 1

So in the last lecture, 2

2

we talked about values and variables. 3

3

Now in every programming language values 4

4

can have different types. 5

5

Depending on the type of data that we want them to hold. 6

6

And we already saw strings and numbers 7

7

but there are actually more data types. 8

8

So let's now take a look at all the types 9

9

that we have in JavaScript. 10

10

And first of all, in JavaScript, 11

11

every value is either an object 12

12

which looks something like this or a primitive value. 13

13

So a value is only a primitive when it's not an object 14

14

and we will learn all about objects later 15

15

but for now let's really focus on primitive data types. 16

16

So there are seven primitive data types, 17

17

number, string, bullion, undefined, null, 18

18

symbol and big int. 19

19

So let's look at them one by one. 20

20

First, we have the number of data type 21

21

and numbers are always so-called floating point numbers 22

22

which means that they always have decimals 23

23

even if we don't see them or don't define them. 24

24

For example, the 23 value debt we have here 25

25

is exactly like having 23.0. 26

26

But they are both simply the number data type. 27

27

In many other programming languages, 28

28

you will find different data types for integers 29

29

and for decimals but not in JavaScript. 30

30

All numbers are simply of the type number. 31

31

Okay, next up we have strengths 32

32

which are simply a sequence of characters. 33

33

And so they're just used for text as we already learned 34

34

and always put them in quotes, 35

35

no matter if double quotes or single quotes 36

36

otherwise JavaScript will actually confuse them 37

37

with variable names. 38

38

The Boolean data type is essentially a logical type 39

39

that can only take one of the logical values true or false. 40

40

In other words, a Boolean is always either true or false. 41

41

All right, we use Boolean values to take decisions 42

42

with code as we will see later. 43

43

And these are the three most important data types 44

44

that we will deal with the most 45

45

but there are still four more 46

46

which might be a bit more confusing. 47

47

So first, undefined is the value taken by a variable 48

48

that is not yet defined. 49

49

And the variable thats not yet defined 50

50

is simply just a variable that we declared 51

51

but without assigning a value 52

52

for example like this children variable here. 53

53

So basically we can say that undefined means empty value 54

54

then there's also null which is actually pretty similar 55

55

because it also means empty value 56

56

but it's used in different circumstances. 57

57

But for now, don't worry about the details. 58

58

I just want you to know that null also exists for now, okay. 59

59

Anyway, next we have symbol which was introduced in ES2015 60

60

and this data type is not really useful for us, 61

61

it's simply defines a value that is unique 62

62

and cannot be changed. 63

63

And we will talk about this briefly 64

64

by the end of the course. 65

65

Finally, starting in ES2020 there is also BigInt 66

66

which is for integers that are too large 67

67

to be represented by the number type. 68

68

So basically it's another tire before numbers 69

69

and we will talk about this one in another section. 70

70

So these are the seven primitive data types in JavaScript. 71

71

But there is another fundamental thing to know about types 72

72

which is the fact that JavaScript 73

73

has a feature called dynamic typing. 74

74

This means that when you create a new variable, 75

75

you do not have to manually define the data type 76

76

of the value that it contains. 77

77

In many other programming languages, 78

78

you actually have to do that but not in JavaScript. 79

79

Instead, Java script automatically determines 80

80

the data type of a value when it's stored into a variable. 81

81

And this distinction between value and variable 82

82

is pretty important because in JavaScript, 83

83

it's the value that has a type, not the variable. 84

84

So variables simply store values that have a type. 85

85

Many people don't know about this detail or just don't care 86

86

but this is how it actually works. 87

87

Now another important application of dynamic typing 88

88

is that later in our code, we can assign a new value 89

89

with a different data type to the same variable 90

90

without a problem. 91

91

For example, variable x can initially be a number 92

92

and then later a string, that's not a problem at all. 93

93

And this can of course be very useful 94

94

but it can also be the source of some difficult 95

95

to find books which means errors in our code. 96

96

All right, so let's not actually see these things in action. 97

97

But before we talk about data types, 98

98

let's quickly talk about code commenting. 99

99

So in programming, we use comments to literally come 100

100

and code or to deactivate code without deleting it. 101

101

For example, here, I could write a single line comment 102

102

using // and then I can describe what this code is doing. 103

103

For example here, I can say, variable name conventions 104

104

and JavaScript will completely ignore anything 105

105

that is a comment. 106

106

So anything that comes after // like this, okay. 107

107

And this can be really useful to kind of divide 108

108

or code into different sections 109

109

and to explain what different pieces of code 110

110

are actually doing in our code. 111

111

So that's a very useful application of comments 112

112

but another one is to simply comment out code 113

113

that we don't want to be executed for some reason. 114

114

For example, let's say we don't want this code here 115

115

to be executed but we also don't want to delete it. 116

116

So we can simply comment it out like this. 117

117

And so if I save it and then 118

118

when I reload this 61 should be gone. 119

119

So you see, that's because JavaScript 120

120

is now ignoring this code, it's just a comment. 121

121

But since we didn't delete it, 122

122

we can of course bring it back. 123

123

So we can just delete it and then it's back to normal. 124

124

Now in VS code we can also automatically create comments 125

125

using the command slash shortcut. 126

126

So that's command or control slash to turn on 127

127

and then again to turn off. 128

128

So that single line comments 129

129

but we can go even further 130

130

and also create multi line comments. 131

131

And to do that, we do it like this. 132

132

We start a multi line comment using slash and an asterisk 133

133

and then we ended with the asterisk or star 134

134

and then the slash and whatever comes here 135

135

is then a normal code. 136

136

Okay, and with this, I effectively got rid 137

137

of this first code that we typed in the first lecture 138

138

but without deleting it. 139

139

And so I can keep it here basically as a reference. 140

140

All right, and so that's what I'm gonna do 141

141

in every lecture now. 142

142

We'll always kind of get rid of the previous code 143

143

by using a multi line comment like this. 144

144

But now let's get back to the topic of this lecture 145

145

which is data types. 146

146

So in a previous lecture, 147

147

we already saw numbers and strengths, right. 148

148

So here we have a value which has a number 149

149

and here we have a value which is a string. 150

150

So nothing new, right. 151

151

That's will be learned at the beginning of the video 152

152

but we also talked about booleans, right? 153

153

And so Boolean is a value that can only be true or false. 154

154

And so if I write true, 155

155

that is then automatically a Boolean value 156

156

which is in this case true. 157

157

Okay, and actually I can also lock that to the console 158

158

and then here you get true 159

159

and you can see that it's not a string 160

160

because strings are printed in white 161

161

and this value is printed in this pink. 162

162

And so it' actually really a Boolean value. 163

163

And of course we can also store Booleans in variables. 164

164

So let's say Java script is fun using 165

165

the camel case notation that we learned about before 166

166

and done, set it to true. 167

167

And now we can log JavaScriptIsFun instead 168

168

but of course the variable declaration here needs 169

169

to happen before the lock. 170

170

And that's because JavaScript programs are executed 171

171

from top to bottom like this 172

172

and more about that a bit later, okay. 173

173

What matters is that this need to be at the end. 174

174

So let's cut it and put it here 175

175

and also get rid of this one, save it. 176

176

And here we still get true. 177

177

And so here we created a nice 178

178

and descriptive variable name holding a Boolean value. 179

179

And remember that it's actually the value 180

180

that holds the data type and not the variable 181

181

because I could now actually go ahead and change this 182

182

to a value with another type. 183

183

And actually I will do that in a second 184

184

but for now let's take a look 185

185

at a special operator called type of. 186

186

So type of it's an operator just like the plus 187

187

or the minus operator 188

188

that we can use to show the type of a value. 189

189

So let me show you how. 190

190

So again, we use console.log because we actually want to see 191

191

the result of this operator in the console. 192

192

So type of and then let's say just true, okay. 193

193

And more about how operators actually work 194

194

and what they are a bit later in the section. 195

195

For now, let's just see what happens when we reload this 196

196

and we see that it's a Boolean. 197

197

So just as I said, the result of using this operator here 198

198

on a value will be a new value 199

199

which is a string with the type of this value here, okay. 200

200

So let's do that again here. 201

201

I will copy it just a couple of times 202

202

just like this to make it a bit faster. 203

203

And so here let's use JavaScriptIsFun. 204

204

And so this should also be a Boolean 205

205

but just to make sure. 206

206

Here let's now use a number and finally a string. 207

207

So just to prove you 208

208

that these are actually numbers and strings. 209

209

All right, and indeed we see that JavaScript 210

210

is fun is a Boolean, 23 is a number and Jonas is a string. 211

211

And speaking about strings, 212

212

I just want to quickly emphasize that we really always need 213

213

to use quotes in order to create a string, okay. 214

214

Let's actually show that here in the console. 215

215

So we can use double quotes or single quotes 216

216

but we really do need quotes in order to create a string. 217

217

So Jonah's, for example is a string, okay, 218

218

and so is Jonah's with single quotes 219

219

but if we do it like this then it's not gonna work. 220

220

So it needs to be the same at the beginning and the end. 221

221

but without any quotes at all, 222

222

JavaScript will see this as a variable. 223

223

And so then we get this reference error 224

224

which is saying that Jonah's is not defined. 225

225

And that's because it's looking for a variable 226

226

that does not exist. 227

227

We never declared a variable called Jonas, right. 228

228

And so that's why we get this error here. 229

229

So when you need a string, don't forget the quotes. 230

230

This is a mistake that I see beginners make all the time. 231

231

And so really be careful about that. 232

232

Now moving on, let's actually see dynamic typing in action. 233

233

And remember that dynamic typing simply means 234

234

that we can easily change the type of a value 235

235

that is hold by a variable. 236

236

So that sounds a bit fancy 237

237

but it's really as simple as this. 238

238

So we already have a variable called JavaScriptIsFun 239

239

and so let's now reassign that variable. 240

240

So we do that like this. 241

241

So we write the name of the variable then equal 242

242

and then a new value. 243

243

And what matters is that we do not write 244

244

the let here again. 245

245

So this let keyword. 246

246

So the first time that we declare a new variable 247

247

we need to do it using let 248

248

but then when we want to change the value of the variable, 249

249

we simply write it again like this but without the let. 250

250

So we simply assign a new value here 251

251

to this already existing variable. 252

252

And this is actually the first time that we did that 253

253

and so it's important to understand what happened here. 254

254

Okay, so again, we first declared a new variable 255

255

with this name and assigned it this true value. 256

256

And then down here, we changed the value data's 257

257

in the variable. 258

258

So using the box analogy from before, 259

259

it's like initially putting a book in a box 260

260

and then later taking the book out of the box 261

261

and instead putting a phone in a box. 262

262

And so just like here, we changed the content of the box. 263

263

In our example here, we changed from true 264

264

to the string of yes. 265

265

Okay, and now let's just grab this piece of code here 266

266

so that we can see that dynamic typing actually works. 267

267

So if I reload now, 268

268

then let's see. 269

269

Well, we get here from line 34. 270

270

Let's actually simplify this a little bit. 271

271

So commenting out this code and I'm using command 272

272

or control slash, that's a reload again. 273

273

And so you'll see that initially the type of JavaScript 274

274

is fun is a bullion, right. 275

275

But then we change it to a string down here. 276

276

And so indeed when we then test the type 277

277

of the variable again in line 39, 278

278

then we get the result of a string. 279

279

All right, and that basically is dynamic typing. 280

280

Great, and now let's see an example of undefined. 281

281

So remember that a number string and bullion 282

282

are the most used data types 283

283

but there are more like undefined and null 284

284

and also symbol in BigInt but in this lecture, 285

285

I'm only gonna talk about the three most important ones 286

286

and then also undefined and null. 287

287

So remember that undefined is the value taken 288

288

by a variable that is not yet defined. 289

289

So basically undefined means an empty value. 290

290

So it's perfectly legal in JavaScript to do this. 291

291

So to define a variable without value. 292

292

And if we now take a look at this variable, 293

293

then we should see undefined. 294

294

And actually let's also check the type 295

295

so that I can show you something, here. 296

296

Okay, and so you get both undefined. 297

297

What this means is that whenever we declare 298

298

an empty variable, the value of the variable 299

299

will be undefined, enter type of the variable 300

300

is also undefined. 301

301

Now that maybe sounds a bit confusing but it's really not. 302

302

So simply put undefined is both the value 303

303

and the type of the value and undefined 304

304

is different than other types in this way. 305

305

But this detail is not really important. 306

306

What matters is that when you declare 307

307

an empty variable like this 308

308

it will automatically hold the value of undefined. 309

309

And that's why we get undefined here. 310

310

Then just like before, we can also reassign 311

311

this variable basically. 312

312

So we can now go ahead and say year 1991. 313

313

And once more without the let 314

314

because we are not creating a new variable, 315

315

we are simply assigning a new value to you. 316

316

So it used to be undefined, right, as we just discussed 317

317

and now I'm changing it to 1991. 318

318

And so if I test for the type now again, 319

319

it should now be a number, right. 320

320

So let's check that. 321

321

And indeed we can again see the effect of dynamic typing. 322

322

Great, and now finally just to quickly finish, 323

323

I want to show you an error that exists 324

324

in the type of operator. 325

325

So all I'm going to do here is to quickly say, 326

326

console.log type of null. 327

327

So remember that null is just another data type 328

328

and it's similar to undefined. 329

329

And it's also similar in the fact that both the value 330

330

and the type of the value are null, okay. 331

331

Now about this bug, Java script says that a type of null 332

332

is an object and this doesn't make any sense at all. 333

333

And so this is regarded as a buck or an error in JavaScript. 334

334

However, this bug is never corrected for legacy reasons 335

335

but now it's of course not an object. 336

336

This should return null 337

337

just as type of undefined returns undefined. 338

338

So just keep that in mind when working with type of 339

339

but we will also come back to this later in the course 340

340

to make sure that you don't create any accidental bugs 341

341

because of this weird behavior. 342

342

Okay, and that's all I had 343

343

to tell you about data types in JavaScript.