Original subtitles

1 1

Let's now learn some more JavaScript fundamentals. 2

2

And in this video in particular, 3

3

let's learn about some basic operators. 4

4

And let's start by defining what an operator actually is. 5

5

So an operator basically allows us to transform values 6

6

or combine multiple values 7

7

and really do all kinds of work with values. 8

8

And there are many categories of operators 9

9

like mathematical operators, comparison operators 10

10

logical operators, assignment operators, and many more. 11

11

So in this video, 12

12

let's look at some of these types of operators 13

13

starting with mathematical or arithmetic operators. 14

14

So we already used the plus and minus operators 15

15

but of course we can do all arithmetic operations. 16

16

So we can also do multiplication, division and many more. 17

17

And let's use the minus operator to calculate ages 18

18

based on a person's birth year. 19

19

So let's say ageJonas equals so the current year, 20

20

and I will simply assume that right now it's 2037. 21

21

So that's far in the future 22

22

but let's make this a bit fun and then minus a birth year. 23

23

So let's say 1991. 24

24

Okay. 25

25

And then let's just quickly log it to the console. 26

26

So ageJonas using the auto-completion here. 27

27

And so my age is 46, at least if we are currently in 2037. 28

28

Okay. 29

29

Now let's do the same for someone else. 30

30

So let's say ageSarah 31

31

and notice how we're using 32

32

nicely descriptive variable names here. 33

33

So the age of Jonas and the age of Sarah, 34

34

instead of, for example, saying age one and age two. 35

35

So again, right now it's 2037 36

36

and then let's say Sarah was born in 2018. 37

37

So let's log her age to the console as well. 38

38

And we could now write the same line as this. 39

39

So again, console.log 40

40

but we can actually also log multiple values 41

41

at the same time. 42

42

So for that we just write a comma like this, 43

43

and then the second value. 44

44

And we could do even more by adding more commas. 45

45

So here we could then log something else. 46

46

Give it a save. 47

47

And so here we see now 46 and 19 years. 48

48

Great. 49

49

So that's how we used the minus operator 50

50

to solve a very simple problem 51

51

in this case, simply to calculate an age. 52

52

However, we can actually do better here. 53

53

That's because we have this value here 54

54

that is repeating itself. 55

55

So this year 2037 is appearing both here and here. 56

56

And so that's not good because we are repeating this value. 57

57

So if the year now changes 58

58

then we would have to change it in these both places. 59

59

And we don't like that. 60

60

And so that's why we have the concept of variables. 61

61

So instead of having this value here, 62

62

let's say now and then we assign this value 63

63

to the now variable. 64

64

Okay. 65

65

And notice how I'm always by default using const. 66

66

Okay. 67

67

And that's because I'm not changing 68

68

any of these variables here anywhere in my code. 69

69

Only if I needed to change them, I would switch to that. 70

70

Okay. And now here I can replace this one with now 71

71

and this one and it should work the same and it does. 72

72

Great. 73

73

So that's a very good use case for a variable right there. 74

74

And of course we can use 75

75

all kinds of different math operations. 76

76

So let's say console.log 77

77

and now we could go ahead into 78

78

ageJonas times two, 79

79

so using this asterisk or star, 80

80

or we could also do 81

81

ageJonas and divided by two, 82

82

and notice how these are two different calculations here. 83

83

So one calculation 84

84

and another one, 85

85

or basically another operation. 86

86

And that's because as I mentioned before, 87

87

we can log different values at the same time 88

88

in one console.log. 89

89

So here we are creating one value 90

90

and here we are creating a second value. 91

91

Let's actually divide it by 10 92

92

and then let's also use the exponentiation operator. 93

93

So for example, two to the power of three, okay. 94

94

And here we can use a comment to explain what this means. 95

95

So that's a nice use case. 96

96

So three means two to the power of three, 97

97

which is equal to two times two times two. 98

98

So three times this, 99

99

so this should be eight, right? 100

100

Let's try that. 101

101

And indeed 46, which is Jonas' age, times two is 92, 102

102

then divided by six is 4.6. 103

103

So that's this. 104

104

And then two to the power of three is indeed eight. 105

105

Nice. 106

106

Next, there is another use case 107

107

that we didn't use yet for the plus operator. 108

108

And that's because we can use the plus operator 109

109

to join strings, 110

110

or in other words, to concatenate different strings. 111

111

So let's create two variables, 112

112

firstName equals Jonas 113

113

and lastName equals Schmedtmann. 114

114

And now I can concatenate these two strings using plus. 115

115

So let's log that to the console. 116

116

So firstName plus lastName. 117

117

And let's see. 118

118

And indeed we have now one big string 119

119

with both of the names together. 120

120

So both of the strings that we declared earlier. 121

121

But what if we wanted a space in between there? 122

122

Well, that's not too hard. 123

123

All we need to do is to create another string 124

124

which is just a space 125

125

and then concatenate it here with these two. 126

126

And we can actually do that right here. 127

127

So we want this string, 128

128

firstName which is just Jonas. 129

129

Remember the JavaScript engine 130

130

will simply replace this string with this one. 131

131

Then we create an empty string 132

132

or actually a string with a space 133

133

and then we add that one to lastName. 134

134

So that's gonna be Jonas plus a space plus Schmedtmann. 135

135

Let's see. 136

136

And indeed that's exactly the result that we were after. 137

137

Now there's actually a better way 138

138

of doing this kind of concatenation of strings, 139

139

which is called template strings, 140

140

but let's focus on operators now. 141

141

Okay. 142

142

So this is a very useful one 143

143

that we actually use quite often. 144

144

So another type of operator 145

145

is actually the typeof operator, 146

146

which we already used up here. 147

147

So I'm not gonna do that again. 148

148

So remember here we had the typeof operator 149

149

and that would then give us the type of the value. 150

150

So we already know how that one works. 151

151

So let's move on to the next category, 152

152

which are assignment operators. 153

153

And the most straightforward assignment operator 154

154

is just the equal sign. 155

155

So let's say, 156

156

let x equal 10 plus five. 157

157

And so this equal sign here is actually itself an operator, 158

158

alright? 159

159

So in this line of code, we do actually have two operators. 160

160

We have the plus and then the equal. 161

161

Now in this case, x will be assigned 15 162

162

because the plus operator is executed 163

163

before the assignment operator, okay? 164

164

And that's based on a couple of rules 165

165

about operator proceedings that I'm gonna show you 166

166

in the next video. 167

167

So let me actually show that to you 168

168

that it indeed works as I told you. 169

169

And yeah, so it's 15. 170

170

So 10 plus five is done first 171

171

and then the result of this operation, 172

172

which is 15, will then be assigned to x. 173

173

And so that itself is another operator 174

174

but there are more assignment operators. 175

175

So let me show one to you, which is this one, 176

176

x plus equal 10. 177

177

So we know that at this point after this line 178

178

x is 15, right? 179

179

So let's write that as a comment. 180

180

And then we have this next line. 181

181

So this weird x plus equal. 182

182

So what does plus equal actually mean? 183

183

Well, let's write that again as a comment. 184

184

So what this means is x equal x plus 10. 185

185

So instead of having to write all of this, 186

186

we can simply write x plus equal 10, all right? 187

187

And so x should now be 25 188

188

because this x year from the previous step is 15. 189

189

So here we are basically reassigning the x value. 190

190

That's why I used a let here. 191

191

So again, x at this point here will be 15 192

192

and then 15 plus 10 should be 25. 193

193

And indeed it's now 25. 194

194

So let's write that result here so that we can keep track 195

195

as I show you more operators, 196

196

because as you might imagine, 197

197

there are more operators like this. 198

198

For example, there is x and then times equal four. 199

199

And I hope you can imagine 200

200

that this will mean x is equal x times four 201

201

and this should be in this case 25 times four, so 100. 202

202

Let's check and yes, it works. 203

203

The same operator also exists with divided here, 204

204

but I'm not gonna go into that one. 205

205

So to finish, I will just show you the x plus plus operator. 206

206

And what this will do is 207

207

x equals x plus one. 208

208

So let's see. 209

209

And yes, we have 101. 210

210

And we also have x minus minus. 211

211

So if we do that twice now, 212

212

what do you think will happen here? 213

213

And indeed we get 99. 214

214

So minus minus is basically 215

215

just the opposite of plus plus. 216

216

So this one will decrease the value by one 217

217

and so we end up with 99. 218

218

Okay. 219

219

So let's actually write 220

220

that these are assignment operators 221

221

and these are, let's say math operators. 222

222

And so now let's talk about comparison operators, 223

223

and these are pretty great. 224

224

So basically, we use comparison operators 225

225

to produce Boolean values. 226

226

So let me show you how that works 227

227

and then I'm sure it will make sense 228

228

that the result of a comparison operator 229

229

should be a Boolean. 230

230

So let's say we are trying to figure out 231

231

if ageJonas is greater than ageSarah, right? 232

232

So what could the result of this be 233

233

if we think about this logically? 234

234

So ageJonas can either be greater than Sarah or not. 235

235

And so if it is greater 236

236

then the result of this should be true 237

237

and if it's not, 238

238

then it should just be false. 239

239

So indeed the result of this one is true 240

240

that's because Jonas' age is 46 and Sarah is 19. 241

241

So this is basically like asking the operator, 242

242

"Is the age of Jonas greater than the age of Sarah?" 243

243

And the operator will then essentially reply with 244

244

yes, it is, which means true 245

245

or no, it's not, which means false. 246

246

And this can be very useful later 247

247

when we start taking decisions with our code 248

248

based on conditions like this. 249

249

Okay. 250

250

Now of course there's also the less than, 251

251

so the opposite, 252

252

and also there is greater equal or less than equal. 253

253

So basically we have this one and we have this one 254

254

then we have greater equal and less than or equal. 255

255

So let's see a nice application 256

256

of the greater than equal operator. 257

257

So let's say we wanted to test if Sarah is of full age. 258

258

So that means that she must be at least 18 years old, 259

259

and at least means that she is greater than 18 260

260

or exactly 18. 261

261

And so we can use the appropriate operator for that. 262

262

So greater or equal 18. 263

263

Okay. 264

264

So 18 should already be included 265

265

and that's why we have this equal here. 266

266

So this should be true. 267

267

And yes, it is. 268

268

So if we make her one year younger, 269

269

so let's say she was born in 2019, then her age is 18, 270

270

as you see here, 271

271

and she is still of full eight. 272

272

So it's still true here. 273

273

And that's because we included 18 here 274

274

in the age basically by using this equal sign. 275

275

But now if we made her born in 2020, she would be 17 276

276

and then this should turn out to be false. 277

277

So that's checked out and yes, now it's false. 278

278

Great. 279

279

Now keep in mind that in real development 280

280

we would actually store these results here. 281

281

So for example, the result of this comparison operator 282

282

or this one year, 283

283

we would store these results in variables 284

284

and not just always lock the results to the console. 285

285

Okay. 286

286

But in this case, I just wanted to show 287

287

how all of this works. 288

288

And so we need to console 289

289

because really all we want to do is to see the results 290

290

because we're still learning. 291

291

Okay. 292

292

We could also just do all of this 293

293

right here in the console immediately 294

294

but then we would kind of lose the record 295

295

of what we're learning 296

296

and it would be not so easy to scroll up and down. 297

297

Okay. 298

298

But of course we could just do this, right. 299

299

We could just write ageSarah greater or equal 18, 300

300

and we would still get the same result. 301

301

And this works because the console actually has access 302

302

to all the variables that is running 303

303

in the current browser tab, right. 304

304

So all the variables that we have here 305

305

like firstName, for example, 306

306

they are all right here. 307

307

Can even auto complete them. 308

308

Okay. 309

309

But then again, if we would reload this page now, 310

310

then all we just did would be lost. 311

311

And of course we could also simply as I said, 312

312

just store these results 313

313

if we needed them later in our code. 314

314

so isFullAge and then we could do this. 315

315

And so this variable 316

316

would be the one holding the Boolean value then. 317

317

And actually as you see here in this popup, 318

318

vs code is so smart that it figures out automatically 319

319

that this variable here is gonna be a Boolean 320

320

because of the code that we wrote here 321

321

which of course has a Boolean as a result. 322

322

Okay. 323

323

So now just to finish, 324

324

let's say that we don't want the intermediate age variables 325

325

and do this kind of comparison here, 326

326

all in one go. 327

327

So this here. 328

328

So let me show that to you in the code. 329

329

So again, imagine we have a lot of code 330

330

and we don't want to calculate these ages here separately. 331

331

So we could just do 332

332

now minus 1991, 333

333

and then test if it's greater than now, minus 2020. 334

334

Well, let's actually put it back to 2019 335

335

as we had before, or actually 2018 I think. 336

336

So this now is basically just the same as this year. 337

337

We simply are doing it now all in one step. 338

338

So this code is the same as this as it's highlighted here. 339

339

And this is the same as this one. 340

340

And so this whole line of code 341

341

is essentially the same as doing this. 342

342

Now the big question here is, 343

343

how does JavaScript know 344

344

if it should do the math first 345

345

or if it should do the comparison first, right? 346

346

Because we could think 347

347

that the first thing to do is to calculate this, 348

348

so basically 46 349

349

and then JavaScript could compare that 46 to now right away, 350

350

right? 351

351

That's what would happen 352

352

if the operation would simply proceed from left to right. 353

353

But we will see that it doesn't. 354

354

So we will see that this actually works just fine, right. 355

355

And so JavaScript has some way of knowing 356

356

that it should first do this operation, 357

357

then this one, 358

358

so that it has the two numbers 359

359

and then only at the end, 360

360

once it has the two ages, 361

361

it will compare them with this operator in the middle. 362

362

So how does that work? 363

363

Well, that's what we're gonna talk about, right, 364

364

in the next video.