Original subtitles

1 1

So, we talked about type conversion 2

2

and coercion to numbers and two strengths, 3

3

but I didn't mention booleans yet, right? 4

4

That's because we need to learn the concept 5

5

of truthy and falsy values first. 6

6

And so, that's what we're gonna do now. 7

7

So, let's get right into it. 8

8

So, falsy values are values that are not exactly false, 9

9

but will become false when we try to convert them 10

10

into a boolean. 11

11

And in JavaScript, there are only five falsy values. 12

12

And let me actually write them down here for you. 13

13

So, five falsy values and they are zero, the empty string, 14

14

undefined, null, and not a number, and that's it. 15

15

Of course, false itself is already false, 16

16

so we don't need to include it in the list of falsy values. 17

17

So again, all of these five values will be converted 18

18

to false when we attempt to convert them to a boolean. 19

19

They're not exactly false initially, 20

20

but they will become when converted to a boolean. 21

21

So, that's the definition of falsy values. 22

22

Everything else are our so-called truthy values. 23

23

So, values that will be converted to true, for example, 24

24

any number that is not zero or any string that is not 25

25

an empty string will be converted to true 26

26

when we attempt to convert them to a boolean. 27

27

And so, let's actually see that in practice. 28

28

So, just like with numbers and strings, 29

29

we can use the boolean function, boolean and then zero. 30

30

And we know that this one is a falsy value, right? 31

31

So, let's copy this and do this a couple of times 32

32

for some different things. 33

33

Let's do the same with undefined. 34

34

Let's do it now with a string and it's not an empty string. 35

35

And now, let's also do this with this empty object 36

36

and we will learn about objects in the next section. 37

37

So, this here is simply an empty object. 38

38

So, let's see what the result of this is gonna be. 39

39

And we see that indeed, converting to zero here 40

40

to a boolean resulted in false, 41

41

and the same for undefined, it's also false. 42

42

But then the string, Jonas is true, 43

43

and so that's why we say that any string that is not 44

44

an empty string is a truthy value. 45

45

And the same actually applies to this empty object here, 46

46

it's also a truthy value. 47

47

But if we tried to convert an empty string, 48

48

well, I think then you can already know 49

49

what the result will be, and it's gonna be false. 50

50

Again because it's a falsy value, 51

51

as we see up here in this list. 52

52

So, that's what truthy and falsy values are. 53

53

And this is how we could convert them to booleans. 54

54

But in practice, I actually never did this in my life. 55

55

I never used this function here in practice. 56

56

This was just to show you the concept of truthy 57

57

and falsely values. 58

58

So in practice, the conversion 59

59

to boolean is always implicit, not explicit, 60

60

or in other words is always typed coercion 61

61

that JavaScript does automatically behind the scenes. 62

62

But when exactly does JavaScript do type coercion 63

63

to booleans? 64

64

Well, it happens in two scenarios. 65

65

First, when using logical operators, and second in 66

66

a logical context, like for example, 67

67

in the condition of an if else statement. 68

68

And we're gonna talk about logical operators in 69

69

a future lecture, so let's now go back 70

70

to the if else statement and see how type coercion works 71

71

in the if else condition. 72

72

So, let's say that we have a money variable 73

73

and in the beginning we don't have any money. 74

74

So, we set it to zero here. 75

75

And now we can use what we just learned to test 76

76

if the person has currently any money or not, right? 77

77

So, let me actually write it first, 78

78

and then I'm gonna explain to you how it works. 79

79

So, if money then let's log to the console, 80

80

something like don't spend it all 81

81

and notice how I used the double quotes, 82

82

because in here I have a single quote for the don't. 83

83

And then we can also do an else block, 84

84

so for the case that the person does not have any money, 85

85

then I can just say, you should get a job. 86

86

Okay. 87

87

So, let's see if this works, and then I'm gonna explain 88

88

to you why it works. 89

89

So, indeed we got the you should get a job, 90

90

and so that's the else part here, right? 91

91

So, this here is the code that got executed, but why? 92

92

Well, we know that money is a number right now. 93

93

And this number is zero, but in the logical context 94

94

of an if else statement condition, 95

95

so that's right here in these parenthesis, 96

96

here JavaScript will try to coerce any value into a boolean. 97

97

So, no matter what we put here, if it's not a boolean, 98

98

JavaScript will try to convert it to a boolean. 99

99

And that happens using the truthy and falsy value rules 100

100

that we just discussed in the beginning. 101

101

So, we know that money here is zero, 102

102

but zero is a falsy value, right? 103

103

And so, in this logical environment here in this condition, 104

104

this number zero will be converted to false. 105

105

Just like it happened here 106

106

when we convert it manually zero to a boolean, right? 107

107

So here, this conversion to boolean returned false. 108

108

And here the exact same thing happens, money is zero, 109

109

and so zero is converted to false 110

110

because it's a falsy value. 111

111

And as a result, the else block here is executed, 112

112

and so on the console we see you should get a job. 113

113

Now, if we change this to something else 114

114

and it doesn't matter what number, let's say 100, 115

115

then 100 is a truthy value, 116

116

and so this means that this condition will be true. 117

117

And so the if block will be executed, wanna see? 118

118

Yes, indeed. 119

119

Now it says don't spend it all. 120

120

Great, I hope that made sense. 121

121

And we can test this in another situation 122

122

to make really sure that you understand it. 123

123

So, another use case for this truthy and falsy values is 124

124

to check if a variable is actually defined or not. 125

125

And this might seem like a weird use case, 126

126

but you will see later in the course that it actually makes 127

127

a lot of sense sometimes to test 128

128

if something actually exists or not. 129

129

So, let's define a variable here as height, 130

130

and then we can simply do this. 131

131

If height, then let's run this code, YAY! Height is defined. 132

132

But if not, well, then just say height is undefined. 133

133

Okay, so let's see the result. 134

134

And again, I will explain you why it works this way, 135

135

and maybe you can already guess why it works this way. 136

136

So, can you try to explain it to yourself maybe? 137

137

That would be a good idea 138

138

to make sure you actually got the concept. 139

139

But anyway, we know that height is undefined 140

140

in this moment, right? 141

141

Because we didn't assign it any value yet. 142

142

And we know from our little list here, 143

143

that undefined is a falsy value. 144

144

And therefore, just like before in the money here, 145

145

this height variable here in this logical context, 146

146

will automatically be converted to a boolean. 147

147

And since height is undefined and undefined is 148

148

a falsy value, height right here will be false. 149

149

Therefore, this block here will be executed. 150

150

But now if we assign something to it, no matter what it is, 151

151

then we will get the other result. 152

152

So, now it's true, and so now this block here is executed. 153

153

However, with this, we can actually run into a problem. 154

154

So, let's say that the height is zero for reason, 155

155

and that's a perfectly valid number, 156

156

but watch what happens when we run this code. 157

157

Now we get again, height is undefined. 158

158

So, why is that? 159

159

And to help you know the answer by now, 160

160

well it's because zero is also a falsy value. 161

161

And so this one will also trigger this else block. 162

162

But in this case, that's actually not what we want. 163

163

So, this is kind of a bug. 164

164

It's an error in our application 165

165

because here in this if else statement, 166

166

we didn't account for this scenario. 167

167

We only accounted for the scenario 168

168

that the height is either defined or not, 169

169

but we didn't think of the height being zero, right? 170

170

And so right now we get hightest undefined, 171

171

even though that's not true. 172

172

So, this is just to illustrate an example 173

173

that there can be problems using this approach. 174

174

However, we can fix this using logical operators, 175

175

which is gonna be very interesting, 176

176

and we will talk about that a little bit later 177

177

in the section. 178

178

But first in the next lecture, we need to talk 179

179

about equality operators, so stay tuned for that.