WEBVTT 1 00:00:01.300 --> 00:00:03.620 So, we talked about type conversion 2 00:00:03.620 --> 00:00:07.240 and coercion to numbers and two strengths, 3 00:00:07.240 --> 00:00:10.150 but I didn't mention booleans yet, right? 4 00:00:10.150 --> 00:00:12.360 That's because we need to learn the concept 5 00:00:12.360 --> 00:00:15.490 of truthy and falsy values first. 6 00:00:15.490 --> 00:00:17.703 And so, that's what we're gonna do now. 7 00:00:19.090 --> 00:00:21.240 So, let's get right into it. 8 00:00:21.240 --> 00:00:26.130 So, falsy values are values that are not exactly false, 9 00:00:26.130 --> 00:00:29.360 but will become false when we try to convert them 10 00:00:29.360 --> 00:00:31.150 into a boolean. 11 00:00:31.150 --> 00:00:34.970 And in JavaScript, there are only five falsy values. 12 00:00:34.970 --> 00:00:38.210 And let me actually write them down here for you. 13 00:00:38.210 --> 00:00:43.210 So, five falsy values and they are zero, the empty string, 14 00:00:47.050 --> 00:00:52.050 undefined, null, and not a number, and that's it. 15 00:00:53.020 --> 00:00:56.120 Of course, false itself is already false, 16 00:00:56.120 --> 00:01:00.070 so we don't need to include it in the list of falsy values. 17 00:01:00.070 --> 00:01:03.530 So again, all of these five values will be converted 18 00:01:03.530 --> 00:01:07.890 to false when we attempt to convert them to a boolean. 19 00:01:07.890 --> 00:01:09.940 They're not exactly false initially, 20 00:01:09.940 --> 00:01:14.000 but they will become when converted to a boolean. 21 00:01:14.000 --> 00:01:17.130 So, that's the definition of falsy values. 22 00:01:17.130 --> 00:01:20.500 Everything else are our so-called truthy values. 23 00:01:20.500 --> 00:01:23.860 So, values that will be converted to true, for example, 24 00:01:23.860 --> 00:01:27.025 any number that is not zero or any string that is not 25 00:01:27.025 --> 00:01:30.060 an empty string will be converted to true 26 00:01:30.060 --> 00:01:32.820 when we attempt to convert them to a boolean. 27 00:01:32.820 --> 00:01:36.023 And so, let's actually see that in practice. 28 00:01:37.270 --> 00:01:39.420 So, just like with numbers and strings, 29 00:01:39.420 --> 00:01:44.420 we can use the boolean function, boolean and then zero. 30 00:01:45.240 --> 00:01:50.240 And we know that this one is a falsy value, right? 31 00:01:50.530 --> 00:01:53.020 So, let's copy this and do this a couple of times 32 00:01:53.020 --> 00:01:54.533 for some different things. 33 00:01:55.470 --> 00:01:57.913 Let's do the same with undefined. 34 00:02:00.580 --> 00:02:05.580 Let's do it now with a string and it's not an empty string. 35 00:02:07.060 --> 00:02:10.750 And now, let's also do this with this empty object 36 00:02:10.750 --> 00:02:13.820 and we will learn about objects in the next section. 37 00:02:13.820 --> 00:02:16.660 So, this here is simply an empty object. 38 00:02:16.660 --> 00:02:19.453 So, let's see what the result of this is gonna be. 39 00:02:22.290 --> 00:02:25.460 And we see that indeed, converting to zero here 40 00:02:25.460 --> 00:02:29.000 to a boolean resulted in false, 41 00:02:29.000 --> 00:02:31.800 and the same for undefined, it's also false. 42 00:02:31.800 --> 00:02:35.770 But then the string, Jonas is true, 43 00:02:35.770 --> 00:02:38.730 and so that's why we say that any string that is not 44 00:02:38.730 --> 00:02:41.600 an empty string is a truthy value. 45 00:02:41.600 --> 00:02:45.000 And the same actually applies to this empty object here, 46 00:02:45.000 --> 00:02:47.420 it's also a truthy value. 47 00:02:47.420 --> 00:02:50.093 But if we tried to convert an empty string, 48 00:02:50.980 --> 00:02:53.630 well, I think then you can already know 49 00:02:53.630 --> 00:02:57.890 what the result will be, and it's gonna be false. 50 00:02:57.890 --> 00:03:00.810 Again because it's a falsy value, 51 00:03:00.810 --> 00:03:03.470 as we see up here in this list. 52 00:03:03.470 --> 00:03:06.270 So, that's what truthy and falsy values are. 53 00:03:06.270 --> 00:03:09.880 And this is how we could convert them to booleans. 54 00:03:09.880 --> 00:03:13.110 But in practice, I actually never did this in my life. 55 00:03:13.110 --> 00:03:16.200 I never used this function here in practice. 56 00:03:16.200 --> 00:03:18.690 This was just to show you the concept of truthy 57 00:03:18.690 --> 00:03:20.520 and falsely values. 58 00:03:20.520 --> 00:03:22.310 So in practice, the conversion 59 00:03:22.310 --> 00:03:26.320 to boolean is always implicit, not explicit, 60 00:03:26.320 --> 00:03:29.380 or in other words is always typed coercion 61 00:03:29.380 --> 00:03:32.640 that JavaScript does automatically behind the scenes. 62 00:03:32.640 --> 00:03:36.400 But when exactly does JavaScript do type coercion 63 00:03:36.400 --> 00:03:37.700 to booleans? 64 00:03:37.700 --> 00:03:40.410 Well, it happens in two scenarios. 65 00:03:40.410 --> 00:03:44.420 First, when using logical operators, and second in 66 00:03:44.420 --> 00:03:46.830 a logical context, like for example, 67 00:03:46.830 --> 00:03:50.070 in the condition of an if else statement. 68 00:03:50.070 --> 00:03:52.410 And we're gonna talk about logical operators in 69 00:03:52.410 --> 00:03:54.920 a future lecture, so let's now go back 70 00:03:54.920 --> 00:03:58.760 to the if else statement and see how type coercion works 71 00:03:58.760 --> 00:04:00.890 in the if else condition. 72 00:04:00.890 --> 00:04:04.540 So, let's say that we have a money variable 73 00:04:06.810 --> 00:04:09.460 and in the beginning we don't have any money. 74 00:04:09.460 --> 00:04:12.150 So, we set it to zero here. 75 00:04:12.150 --> 00:04:14.890 And now we can use what we just learned to test 76 00:04:14.890 --> 00:04:18.830 if the person has currently any money or not, right? 77 00:04:18.830 --> 00:04:20.540 So, let me actually write it first, 78 00:04:20.540 --> 00:04:23.550 and then I'm gonna explain to you how it works. 79 00:04:23.550 --> 00:04:28.063 So, if money then let's log to the console, 80 00:04:31.890 --> 00:04:34.463 something like don't spend it all 81 00:04:38.870 --> 00:04:41.590 and notice how I used the double quotes, 82 00:04:41.590 --> 00:04:44.313 because in here I have a single quote for the don't. 83 00:04:45.550 --> 00:04:47.450 And then we can also do an else block, 84 00:04:49.820 --> 00:04:53.540 so for the case that the person does not have any money, 85 00:04:53.540 --> 00:04:58.540 then I can just say, you should get a job. 86 00:05:01.150 --> 00:05:02.590 Okay. 87 00:05:02.590 --> 00:05:05.630 So, let's see if this works, and then I'm gonna explain 88 00:05:05.630 --> 00:05:07.640 to you why it works. 89 00:05:07.640 --> 00:05:11.050 So, indeed we got the you should get a job, 90 00:05:11.050 --> 00:05:14.240 and so that's the else part here, right? 91 00:05:14.240 --> 00:05:18.350 So, this here is the code that got executed, but why? 92 00:05:18.350 --> 00:05:21.930 Well, we know that money is a number right now. 93 00:05:21.930 --> 00:05:25.410 And this number is zero, but in the logical context 94 00:05:25.410 --> 00:05:27.890 of an if else statement condition, 95 00:05:27.890 --> 00:05:30.300 so that's right here in these parenthesis, 96 00:05:30.300 --> 00:05:34.580 here JavaScript will try to coerce any value into a boolean. 97 00:05:34.580 --> 00:05:37.720 So, no matter what we put here, if it's not a boolean, 98 00:05:37.720 --> 00:05:40.980 JavaScript will try to convert it to a boolean. 99 00:05:40.980 --> 00:05:44.122 And that happens using the truthy and falsy value rules 100 00:05:44.122 --> 00:05:47.060 that we just discussed in the beginning. 101 00:05:47.060 --> 00:05:50.150 So, we know that money here is zero, 102 00:05:50.150 --> 00:05:53.200 but zero is a falsy value, right? 103 00:05:53.200 --> 00:05:56.550 And so, in this logical environment here in this condition, 104 00:05:56.550 --> 00:05:59.280 this number zero will be converted to false. 105 00:05:59.280 --> 00:06:01.570 Just like it happened here 106 00:06:01.570 --> 00:06:05.650 when we convert it manually zero to a boolean, right? 107 00:06:05.650 --> 00:06:09.510 So here, this conversion to boolean returned false. 108 00:06:09.510 --> 00:06:12.700 And here the exact same thing happens, money is zero, 109 00:06:12.700 --> 00:06:15.070 and so zero is converted to false 110 00:06:15.070 --> 00:06:16.810 because it's a falsy value. 111 00:06:16.810 --> 00:06:20.290 And as a result, the else block here is executed, 112 00:06:20.290 --> 00:06:23.940 and so on the console we see you should get a job. 113 00:06:23.940 --> 00:06:26.100 Now, if we change this to something else 114 00:06:26.100 --> 00:06:29.610 and it doesn't matter what number, let's say 100, 115 00:06:29.610 --> 00:06:32.760 then 100 is a truthy value, 116 00:06:32.760 --> 00:06:36.000 and so this means that this condition will be true. 117 00:06:36.000 --> 00:06:40.163 And so the if block will be executed, wanna see? 118 00:06:41.380 --> 00:06:42.670 Yes, indeed. 119 00:06:42.670 --> 00:06:44.873 Now it says don't spend it all. 120 00:06:45.810 --> 00:06:47.973 Great, I hope that made sense. 121 00:06:48.910 --> 00:06:51.940 And we can test this in another situation 122 00:06:51.940 --> 00:06:55.000 to make really sure that you understand it. 123 00:06:55.000 --> 00:06:58.390 So, another use case for this truthy and falsy values is 124 00:06:58.390 --> 00:07:02.510 to check if a variable is actually defined or not. 125 00:07:02.510 --> 00:07:05.250 And this might seem like a weird use case, 126 00:07:05.250 --> 00:07:07.980 but you will see later in the course that it actually makes 127 00:07:07.980 --> 00:07:10.080 a lot of sense sometimes to test 128 00:07:10.080 --> 00:07:13.120 if something actually exists or not. 129 00:07:13.120 --> 00:07:17.200 So, let's define a variable here as height, 130 00:07:17.200 --> 00:07:20.070 and then we can simply do this. 131 00:07:20.070 --> 00:07:25.070 If height, then let's run this code, YAY! Height is defined. 132 00:07:35.350 --> 00:07:40.350 But if not, well, then just say height is undefined. 133 00:07:44.540 --> 00:07:46.800 Okay, so let's see the result. 134 00:07:46.800 --> 00:07:49.850 And again, I will explain you why it works this way, 135 00:07:49.850 --> 00:07:52.860 and maybe you can already guess why it works this way. 136 00:07:52.860 --> 00:07:55.800 So, can you try to explain it to yourself maybe? 137 00:07:55.800 --> 00:07:57.000 That would be a good idea 138 00:07:57.000 --> 00:07:59.830 to make sure you actually got the concept. 139 00:07:59.830 --> 00:08:03.940 But anyway, we know that height is undefined 140 00:08:03.940 --> 00:08:05.570 in this moment, right? 141 00:08:05.570 --> 00:08:08.530 Because we didn't assign it any value yet. 142 00:08:08.530 --> 00:08:10.780 And we know from our little list here, 143 00:08:10.780 --> 00:08:13.410 that undefined is a falsy value. 144 00:08:13.410 --> 00:08:18.100 And therefore, just like before in the money here, 145 00:08:18.100 --> 00:08:21.150 this height variable here in this logical context, 146 00:08:21.150 --> 00:08:23.960 will automatically be converted to a boolean. 147 00:08:23.960 --> 00:08:26.890 And since height is undefined and undefined is 148 00:08:26.890 --> 00:08:31.320 a falsy value, height right here will be false. 149 00:08:31.320 --> 00:08:34.163 Therefore, this block here will be executed. 150 00:08:35.430 --> 00:08:39.660 But now if we assign something to it, no matter what it is, 151 00:08:39.660 --> 00:08:43.510 then we will get the other result. 152 00:08:43.510 --> 00:08:48.390 So, now it's true, and so now this block here is executed. 153 00:08:48.390 --> 00:08:52.270 However, with this, we can actually run into a problem. 154 00:08:52.270 --> 00:08:56.240 So, let's say that the height is zero for reason, 155 00:08:56.240 --> 00:08:58.620 and that's a perfectly valid number, 156 00:08:58.620 --> 00:09:01.810 but watch what happens when we run this code. 157 00:09:01.810 --> 00:09:04.860 Now we get again, height is undefined. 158 00:09:04.860 --> 00:09:07.030 So, why is that? 159 00:09:07.030 --> 00:09:09.220 And to help you know the answer by now, 160 00:09:09.220 --> 00:09:13.180 well it's because zero is also a falsy value. 161 00:09:13.180 --> 00:09:16.660 And so this one will also trigger this else block. 162 00:09:16.660 --> 00:09:19.440 But in this case, that's actually not what we want. 163 00:09:19.440 --> 00:09:21.210 So, this is kind of a bug. 164 00:09:21.210 --> 00:09:23.490 It's an error in our application 165 00:09:23.490 --> 00:09:25.420 because here in this if else statement, 166 00:09:25.420 --> 00:09:27.900 we didn't account for this scenario. 167 00:09:27.900 --> 00:09:29.420 We only accounted for the scenario 168 00:09:29.420 --> 00:09:32.330 that the height is either defined or not, 169 00:09:32.330 --> 00:09:36.210 but we didn't think of the height being zero, right? 170 00:09:36.210 --> 00:09:38.780 And so right now we get hightest undefined, 171 00:09:38.780 --> 00:09:40.890 even though that's not true. 172 00:09:40.890 --> 00:09:43.500 So, this is just to illustrate an example 173 00:09:43.500 --> 00:09:46.300 that there can be problems using this approach. 174 00:09:46.300 --> 00:09:49.280 However, we can fix this using logical operators, 175 00:09:49.280 --> 00:09:51.350 which is gonna be very interesting, 176 00:09:51.350 --> 00:09:53.610 and we will talk about that a little bit later 177 00:09:53.610 --> 00:09:55.220 in the section. 178 00:09:55.220 --> 00:09:57.440 But first in the next lecture, we need to talk 179 00:09:57.440 --> 00:10:01.203 about equality operators, so stay tuned for that.