Jonas: Before we can move on to our next big topic,
we need to quickly learn about something called
truthy and falsy values.
So in JavaScript, a falsy value is a value
that is considered false when evaluated
in an if/else statement condition.
And the values that are falsy in JavaScript
are undefined, null, zero, empty strings,
and "not a number" values.
Let me actually write that down for you, okay.
So falsy
values, they are
undefined, null, zero,
empty strings, and not a number.
We didn't talk about this here yet,
but you will see examples of this here later in the course.
Okay, so all of these five different values here
will be converted to false when evaluated
in a true/false condition.
So that's why we call them falsy.
They are not exactly false,
but they will turn out to be false when evaluated
in a if/else condition.
Now we also have truthy values.
And of course the truthy values
are all the values that are considered true
when evaluated in an if/else statement condition.
So basically, it's all the values that are not falsy.
Okay, so let's now take a look at an example
to demonstrate how this works.
Let's define a variable of height, let's say.
And we will not actually define it,
so we just declare it here.
And now let's write an if/else statement.
So we can say if height,
and then log to the console.
The variable is defined.
And else...
The variable has not been defined.
So, lets see what happens here.
And what we get printed here,
is that the variable has not been defined.
So why is that happening?
Well, we declared the variable here as height,
but we didn't define it.
So you already know that it's now undefined.
And we also know undefined is a falsy value, right?
So in here when we say if height,
then this height here is converted to false.
So therefore, we entered the else block,
which will then print that the variable
hasn't been defined yet.
This is a very handy way of testing
if a variable has actually been defined or not.
Now let's say that we actually do define a value.
So let's say 23...
So watch what happens now?
Of course, the variable is now defined.
That's because everything
that's not a falsy value is a truthy value.
We already know that when a variable exists,
well then this here will be converted to true,
and therefore, the if block is entered.
So, again a very handy way of testing
if a variable actually exists.
Now there's just one thing to keep in mind here,
and that is that...
Notice how this zero also has a falsy value,
but the height can of course be zero.
So let's set it to zero here.
The variable is actually defined now isn't it?
So we have a value here, it's not undefined.
But if we now reload this, well then it still says
that the variable has not been defined.
That's, of course, a situation that we want to avoid.
So this here cannot only be height,
but we also have to say that if the variable is zero,
well then the variable is also defined.
Remember that we can use the or operator
to do exactly that.
So we already used the and operator before,
but we also talked about the or operator.
So we can say,
or
the height is
equal to zero.
So that will fix the problem.
This is quite a common pattern in JavaScript,
to check if a variable is defined.
So we check if the variable exists,
or if it is equal to zero.
Then the if block here is in fact entered.
Okay, so let's check that out again,
and so now we see that the variable is defined.
Remember, that only one of these here has to be true
in order for the entire condition to be true.
So in this case now the height is zero,
and so this here will be converted to false.
But we don't have height equal to zero,
which is true of course,
because in this situation the height is zero.
So we have false and true,
which will result in true.
Therefore, this line of code here is then executed.
Alright, now this is going to work with any number here,
and also with strings.
So let's say 20, for example.
And you see that it's still true,
because it's still entered that first block.
But if we have an empty string,
remember that also is a falsy value as we see here.
So with an empty string it now says
the variable has not been defined again.
So, that kind of makes sense, right?
Because in fact, there's not really something there,
it's just like an empty string.
So these are falsy and truthy values,
and the handy way to check
if a variable is actually defined.
Now just to finish, let's talk about
the two different equality operators.
So we've always used this triple equal operator, right?
This is the one for strict equality comparisons.
But there is also the equal, equal,
so this operator here...
And the difference is that this one does type coercion,
Which means that the data types
of both variables do not have to match.
Let me show that to you, actually in practice.
So, just to comment here, and now let's say
if height
equals 23...
So we have a string now here.
Then let's simply log to the console,
the equal equal operator...
does type coercion.
Let's check out what happened.
Before we do that, let's set this here back to 23.
What we're doing here,
is to compare the height which is 23,
a number with a string of 23,
with a non-strict equality operator, which is this one.
So only two equals.
Let's take a look at this.
And so you see that this actually turns out to be true,
so we enter this first if block.
So you see, the equal equal operator does type coercion.
What this means is that JavaScript,
when we use this operator here,
converts the string of 23 to a number,
and then says that it's the same as 23, the number.
Let's take a look at that here again.
So, 23 and then the string 23.
And it will say that it is true.
It's exactly what we observed in here.
So again, JavaScript does type coercion,
which basically means to convert
this string here to a number,
and then compares the numbers,
and then of course they are the same, right?
Now if instead we use the strict equality operator
with the three equal signs,
well then it will not do type coercion.
So therefore, what do you think will happen now?
Yes indeed, it now says that it's false,
because in fact they are two different things.
So we have 23 the number, and 23 the string.
And they are different things,
so in fact, we want them not to be the same, okay.
And so if instead, we had three equals here
well then of course we will not see this operative.
We will not see this log to the console because it's false.
Okay, so that is how the strict equality operator works,
and it is absolutely a best practice
to always use the triple equal,
so the strict equality operator,
in order to avoid unexpected situations and bugs.
So that's why I've been using this operator all the time,
with the three equals, and not just the two equals.