Original subtitles

1 1

So far, we have only used comparison operators 2

2

to take decisions with if else statements, right? 3

3

But let's suppose we want to check 4

4

if two values are actually equal, 5

5

instead of one being greater 6

6

or less than the other. 7

7

And for that we have different equality operators. 8

8

So let's start again with an eight variable 9

9

and set it equal to 18. 10

10

And I'm using age all the time, 11

11

because it's so easy 12

12

to make simple calculations with it. 13

13

So let's now create an if statement, 14

14

which will log to the console, 15

15

that the person just became an adult, 16

16

only if the age is exactly 18. 17

17

So we can use an if statement, 18

18

as you already know. 19

19

And now to check if the age is exactly 18, 20

20

We use the triple equal. Okay? 21

21

And that's it. 22

22

Let's not write a block 23

23

of this if statement 24

24

and then execute it. 25

25

And then I will explain 26

26

what happened here a little bit better. 27

27

Now, whenever or if block only has one line, 28

28

we actually don't need two curly braces. Okay? 29

29

so we don't need to create this block 30

30

if we only have one line. 31

31

So we can omit this 32

32

and only write this one line of code. 33

33

In this case, 34

34

you just became an adult. 35

35

So let's test this. 36

36

And indeed, the result is 37

37

that we see the string locked to the console. 38

38

And if the value would be something else 39

39

for example 19, then 8 is no longer equal to 18. 40

40

And so we shouldn't see this result. And indeed, 41

41

but let's put it back to 18. 42

42

Okay, so how does this equality operator here actually work? 43

43

Well, just like the comparison operators, 44

44

this operator will return a true or a false value. 45

45

So a boolean value, 46

46

only that in this case, 47

47

true will only be the result of this operator 48

48

in case that both sides are exactly the same. All right? 49

49

let's actually show 50

50

that result to you. 51

51

And actually we can do 52

52

that right here in the console. 53

53

So if I see 18, 54

54

equal equal equal to 18, 55

55

this will be true. 56

56

But if I say 18, 57

57

equal equal equal to 19, 58

58

it will be false. 59

59

And so that's exactly what we used here, 60

60

as a condition in this if block. 61

61

So don't confuse the assignment 62

62

which is just a single equal 63

63

with the comparison operator, 64

64

which is this triple equal. 65

65

Now, besides this triple equal, 66

66

we also have a double equal. 67

67

So the difference is 68

68

that this one here with the three equals 69

69

is called the strict equality operator. 70

70

It's strict, 71

71

because it does not perform type coercion. 72

72

And so it only returns 73

73

to when both values are exactly the same. 74

74

On the other hand, 75

75

there's also the loose equality operator, 76

76

which is only two equals, 77

77

and the loose equality operator 78

78

actually does type coercion. 79

79

So let's see that here in the console again, 80

80

so in this case, 81

81

I can do 18, the string equal equal 18 the number, 82

82

and it will still give me true. 83

83

So again, the double equal does type coercion. 84

84

So what this means is 85

85

that this string here is 18 86

86

will be converted to a number 87

87

and then the number 18 88

88

is the same as this number 18. 89

89

Now, as I mentioned, 90

90

the triple equals does not perform type coercion. 91

91

And so let me show that to you. 92

92

And so it's false. 93

93

Because 18, the string 94

94

is of course different than 18, the number, 95

95

so it's not the same 96

96

and JavaScript does not convert them for us. 97

97

So let's try that also here in our code. 98

98

I'm just going to copy this one. 99

99

And then this, and let's say here, 100

100

lose and here strict. 101

101

So if I run this now, 102

102

both these conditions should be true. 103

103

So 18, the number, 104

104

which is the age right now 105

105

is equal to this 18 the number, right? 106

106

It's strictly equal, 107

107

but it's also loosely equal. 108

108

So 18 the number is, 109

109

of course also loosely equal to this 18. 110

110

So let's run that. 111

111

And indeed, we get a strict 112

112

and the loose string printed to the console. 113

113

But now if we change this 114

114

to 18 the string 115

115

Well, what do we expect to happen then? 116

116

And indeed, only this line of code here is executed. 117

117

So this one which says loose here, 118

118

as we see here, 119

119

and so that's 120

120

because of the results 121

121

that I showed you earlier, 122

122

which is that 123

123

with the loose equality operator 18 to string 124

124

is the same as 18 the number 125

125

because 18 to string 126

126

will be converted to 18 the number. 127

127

So I hope that's not too confusing for you, 128

128

it is actually quite a confusing topic in JavaScript, 129

129

because this loose equality operator. 130

130

So this one here, 131

131

is full of really weird rules and behaviors. 132

132

This means that if we use this one here, 133

133

this can introduce many hard 134

134

to find bugs into our code. 135

135

So as a general rule for clean code, 136

136

avoid the loose equality operator 137

137

as much as you can. 138

138

So when comparing values, 139

139

always use strict equality 140

140

with the three equal signs, 141

141

as I showed you here. 142

142

And that's the reason why I showed you this one first. 143

143

This is something 144

144

that actually most JavaScript developers advise you to do. 145

145

So it's a good rule for sure. 146

146

Even if we actually need type conversion. 147

147

In that case, 148

148

it's better to convert the value manually 149

149

before the comparison 150

150

than relying on the double equal operator. 151

151

Some always default to the triple equal operator 152

152

and pretend that this one doesn't even exist. Okay? 153

153

of course, I still needed to show it to you. 154

154

But from now on, 155

155

we will assume that it doesn't even exist. 156

156

Great. So let's do another example here, 157

157

because I actually have some more great stuff to show you. 158

158

And the first thing 159

159

that I want to show you is 160

160

that there is a pretty simple way 161

161

of getting a value from any webpage, 162

162

we can do that by using the prompt function. 163

163

And again, we will learn what functions are 164

164

in the next section. 165

165

But this is how it works. 166

166

So we just write prompt, 167

167

and then a string. 168

168

And let's ask the user 169

169

for his favorite number. 170

170

So what's your favorite number. 171

171

So let's see what happens when we load this now. 172

172

So we get this prompt window. 173

173

And here, we can input something, 174

174

and then hit return. 175

175

So basically, all this here 176

176

will create a value, 177

177

in this case, the number that i just input it. 178

178

But we need to store this value somewhere. 179

179

So let's create a variable called favorite. 180

180

So it's in this favorite variable, 181

181

where the value that we put into that form 182

182

will be stored. 183

183

So let's take a look at that console.log 184

184

favorite. So 23. 185

185

And you'll see 186

186

that it now locks the value. 187

187

But it's printed here in white. 188

188

So remember, that means that it is a string. 189

189

Let me prove that to you by checking the type. 190

190

So by now we know how 191

191

to always check the type, right? 192

192

Pretty simple. 193

193

And so now we should see string. 194

194

Now, of course, we have to give the number again. 195

195

So 23 is the result. 196

196

And it is indeed a string. 197

197

So now let's write some logic here 198

198

to check if this is a great number, basically. 199

199

So let's say if the favorite number is equal. 200

200

And let's use this one first. 201

201

So if the number is equal to 23, 202

202

then let's log to the console. 203

203

Cool. 23 is an amazing number. 204

204

Okay. And so now this should actually work, shouldn't it? 205

205

So 23, and we get this result. 206

206

So again, why is that? 207

207

Well, because we used the double equals here, 208

208

which is the loose equality operator 209

209

and this one will do type coercion, right? 210

210

So right now, what we have here 211

211

is basically 23 the string 212

212

which is this one here 213

213

equal equal 23. 214

214

And so this one will be converted to a number 215

215

and then the number 23 is 216

216

of course equal to 23. 217

217

However, if we use the triple equals, 218

218

so the strict operator, 219

219

then it should not work. 220

220

So 23 again, but we do not get that log. 221

221

And by now you already understand why that is. Right? 222

222

So remember how I said 223

223

that we should always use this one. 224

224

And so we now have to convert this string to a number. 225

225

And we can actually wrap all of this 226

226

into that number function 227

227

that we used to convert. 228

228

So number 229

229

and then we put all of this here 230

230

which is the one that will generate the String 23. 231

231

And then we wrap that into the parenthesis 232

232

to execute the number converter. 233

233

And so right now favorite is gonna be a number. 234

234

And so then this should be back to working. 235

235

Because then at this point, 236

236

we have 23, equal 23. 237

237

And so that, of course, 238

238

is true here. 239

239

And so then this line of code will run. 240

240

So 23, and indeed it does. 241

241

And you see that it's also now pink, 242

242

meaning that it's a number. 243

243

Now, if I use something else, 244

244

then of course, 245

245

this here is also false. 246

246

So if I have 22 here, 247

247

then this will, of course, 248

248

be false, because they are different. 249

249

But this actually brings me to my next point, 250

250

which is the next cool thing 251

251

that I wanted to show you. 252

252

And that is that we can actually add more condition 253

253

to an if else statement. 254

254

So, so far, we have only used if else. 255

255

However, we can also add an else if block 256

256

that works like this. 257

257

So else, and then a new if 258

258

so, let's not do favorites, 259

259

equal to seven, 260

260

let's say seven is also a cool number. 261

261

And so what this will do, 262

262

is to first check if the number is 23 here, 263

263

then if it's not, it will, 264

264

of course, go to the next block, 265

265

which is this one, 266

266

and then it will check this condition. 267

267

Well, if the number is seven now, 268

268

then run this code. 269

269

And then at the end, 270

270

we can also add an else block. 271

271

So let's say number is not 23 or seven. 272

272

So let's test that. 273

273

So if I put seven now, 274

274

we get seven is also a cool number. 275

275

And so that's our else if block here. 276

276

So this second one here running. 277

277

But now if I do something else, 278

278

that is neither 23 nor seven, 279

279

then we go to that last else block here. 280

280

Okay, and we can actually keep adding more and more. 281

281

So we can do this as long as we want. 282

282

So we can do else if favorite, 283

283

triple equal nine, for example. 284

284

Let's simply grab this one here, 285

285

say nine is also a cool number. 286

286

And then number is not 23 or seven or nine, 287

287

just to make it really complete. 288

288

And so now if we use the nine, 289

289

then nine is also a cool number. 290

290

So we now have a way 291

291

of not going immediately 292

292

into the else block 293

293

once the initial condition is false. 294

294

So if this one is false, 295

295

it doesn't immediately go into the else block. 296

296

There are now other conditions 297

297

that can be checked one after the other. 298

298

First, we check for 23. 299

299

But if it's not 23, 300

300

we check if it's seven. 301

301

If it's not seven, 302

302

we check if it's nine. 303

303

And if it's not nine, 304

304

well, then the final else block will be executed. Okay? 305

305

I hope that makes sense. 306

306

And we actually use this from time to time. 307

307

Okay, and now to finish there's also 308

308

an operator for different. 309

309

So we talked about equal. 310

310

But of course, there must also be an operator 311

311

which does the opposite. 312

312

And so that's the different operator. 313

313

And so Let's now check 314

314

if the favorite is different from 23. 315

315

So we use the exclamation mark 316

316

and then the double equal 317

317

which is the strict version. 318

318

And then there's also the loose version, 319

319

which is this one. 320

320

So with just one equal 321

321

but just as before always use the strict version. 322

322

So if the number is not 23, 323

323

we can lock something like saying why not the 23. Okay? 324

324

let's try that. 325

325

And let's use nine. 326

326

So what do you think will happen 327

327

when we use the number nine. 328

328

So we get first this lock here 329

329

from this else if block, right? 330

330

But then we also get this why not 23 message 331

331

and that's of course coming 332

332

from this if block here. 333

333

So nine is of course different from 23 334

334

And so a this code here is being executed. 335

335

But now if we actually use the 23, 336

336

then only this line of code is executed. 337

337

And this one here isn't 338

338

because the favorite number 339

339

is now equal to 23. 340

340

And so of course, it doesn't make sense 341

341

to then execute this one here. 342

342

So sometimes we need the different operator 343

343

and sometimes we need the equality operator. 344

344

Just choose whatever you need 345

345

to solve any particular problem. 346

346

In both cases, just make sure 347

347

to use the strict version of the operator