All language subtitles for 022 Equality Operators_ == vs. ===.en_US

So far, we have only used comparison operators

to take decisions with if else statements, right?

But let's suppose we want to check

if two values are actually equal,

instead of one being greater

or less than the other.

And for that we have different equality operators.

So let's start again with an eight variable

and set it equal to 18.

And I'm using age all the time,

because it's so easy

to make simple calculations with it.

So let's now create an if statement,

which will log to the console,

that the person just became an adult,

only if the age is exactly 18.

So we can use an if statement,

as you already know.

And now to check if the age is exactly 18,

We use the triple equal. Okay?

And that's it.

Let's not write a block

of this if statement

and then execute it.

And then I will explain

what happened here a little bit better.

Now, whenever or if block only has one line,

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

so we don't need to create this block

if we only have one line.

So we can omit this

and only write this one line of code.

In this case,

you just became an adult.

So let's test this.

And indeed, the result is

that we see the string locked to the console.

And if the value would be something else

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

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

but let's put it back to 18.

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

Well, just like the comparison operators,

this operator will return a true or a false value.

So a boolean value,

only that in this case,

true will only be the result of this operator

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

let's actually show

that result to you.

And actually we can do

that right here in the console.

So if I see 18,

equal equal equal to 18,

this will be true.

But if I say 18,

equal equal equal to 19,

it will be false.

And so that's exactly what we used here,

as a condition in this if block.

So don't confuse the assignment

which is just a single equal

with the comparison operator,

which is this triple equal.

Now, besides this triple equal,

we also have a double equal.

So the difference is

that this one here with the three equals

is called the strict equality operator.

It's strict,

because it does not perform type coercion.

And so it only returns

to when both values are exactly the same.

On the other hand,

there's also the loose equality operator,

which is only two equals,

and the loose equality operator

actually does type coercion.

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

so in this case,

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

and it will still give me true.

So again, the double equal does type coercion.

So what this means is

that this string here is 18

will be converted to a number

and then the number 18

is the same as this number 18.

Now, as I mentioned,

the triple equals does not perform type coercion.

And so let me show that to you.

And so it's false.

Because 18, the string

is of course different than 18, the number,

so it's not the same

and JavaScript does not convert them for us.

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

I'm just going to copy this one.

And then this, and let's say here,

lose and here strict.

So if I run this now,

both these conditions should be true.

So 18, the number,

which is the age right now

is equal to this 18 the number, right?

It's strictly equal,

but it's also loosely equal.

So 18 the number is,

of course also loosely equal to this 18.

So let's run that.

And indeed, we get a strict

and the loose string printed to the console.

But now if we change this

to 18 the string

Well, what do we expect to happen then?

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

So this one which says loose here,

as we see here,

and so that's

because of the results

that I showed you earlier,

which is that

with the loose equality operator 18 to string

is the same as 18 the number

because 18 to string

will be converted to 18 the number.

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

it is actually quite a confusing topic in JavaScript,

because this loose equality operator.

So this one here,

is full of really weird rules and behaviors.

This means that if we use this one here,

this can introduce many hard

to find bugs into our code.

So as a general rule for clean code,

avoid the loose equality operator

as much as you can.

So when comparing values,

always use strict equality

with the three equal signs,

as I showed you here.

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

This is something

that actually most JavaScript developers advise you to do.

So it's a good rule for sure.

Even if we actually need type conversion.

In that case,

it's better to convert the value manually

before the comparison

than relying on the double equal operator.

Some always default to the triple equal operator

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

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

But from now on,

we will assume that it doesn't even exist.

Great. So let's do another example here,

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

And the first thing

that I want to show you is

that there is a pretty simple way

of getting a value from any webpage,

we can do that by using the prompt function.

And again, we will learn what functions are

in the next section.

But this is how it works.

So we just write prompt,

and then a string.

And let's ask the user

for his favorite number.

So what's your favorite number.

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

So we get this prompt window.

And here, we can input something,

and then hit return.

So basically, all this here

will create a value,

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

But we need to store this value somewhere.

So let's create a variable called favorite.

So it's in this favorite variable,

where the value that we put into that form

will be stored.

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

favorite. So 23.

And you'll see

that it now locks the value.

But it's printed here in white.

So remember, that means that it is a string.

Let me prove that to you by checking the type.

So by now we know how

to always check the type, right?

Pretty simple.

And so now we should see string.

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

So 23 is the result.

And it is indeed a string.

So now let's write some logic here

to check if this is a great number, basically.

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

And let's use this one first.

So if the number is equal to 23,

then let's log to the console.

Cool. 23 is an amazing number.

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

So 23, and we get this result.

So again, why is that?

Well, because we used the double equals here,

which is the loose equality operator

and this one will do type coercion, right?

So right now, what we have here

is basically 23 the string

which is this one here

equal equal 23.

And so this one will be converted to a number

and then the number 23 is

of course equal to 23.

However, if we use the triple equals,

so the strict operator,

then it should not work.

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

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

So remember how I said

that we should always use this one.

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

And we can actually wrap all of this

into that number function

that we used to convert.

So number

and then we put all of this here

which is the one that will generate the String 23.

And then we wrap that into the parenthesis

to execute the number converter.

And so right now favorite is gonna be a number.

And so then this should be back to working.

Because then at this point,

we have 23, equal 23.

And so that, of course,

is true here.

And so then this line of code will run.

So 23, and indeed it does.

And you see that it's also now pink,

meaning that it's a number.

Now, if I use something else,

then of course,

this here is also false.

So if I have 22 here,

then this will, of course,

be false, because they are different.

But this actually brings me to my next point,

which is the next cool thing

that I wanted to show you.

And that is that we can actually add more condition

to an if else statement.

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

However, we can also add an else if block

that works like this.

So else, and then a new if

so, let's not do favorites,

equal to seven,

let's say seven is also a cool number.

And so what this will do,

is to first check if the number is 23 here,

then if it's not, it will,

of course, go to the next block,

which is this one,

and then it will check this condition.

Well, if the number is seven now,

then run this code.

And then at the end,

we can also add an else block.

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

So let's test that.

So if I put seven now,

we get seven is also a cool number.

And so that's our else if block here.

So this second one here running.

But now if I do something else,

that is neither 23 nor seven,

then we go to that last else block here.

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

So we can do this as long as we want.

So we can do else if favorite,

triple equal nine, for example.

Let's simply grab this one here,

say nine is also a cool number.

And then number is not 23 or seven or nine,

just to make it really complete.

And so now if we use the nine,

then nine is also a cool number.

So we now have a way

of not going immediately

into the else block

once the initial condition is false.

So if this one is false,

it doesn't immediately go into the else block.

There are now other conditions

that can be checked one after the other.

First, we check for 23.

But if it's not 23,

we check if it's seven.

If it's not seven,

we check if it's nine.

And if it's not nine,

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

I hope that makes sense.

And we actually use this from time to time.

Okay, and now to finish there's also

an operator for different.

So we talked about equal.

But of course, there must also be an operator

which does the opposite.

And so that's the different operator.

And so Let's now check

if the favorite is different from 23.

So we use the exclamation mark

and then the double equal

which is the strict version.

And then there's also the loose version,

which is this one.

So with just one equal

but just as before always use the strict version.

So if the number is not 23,

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

let's try that.

And let's use nine.

So what do you think will happen

when we use the number nine.

So we get first this lock here

from this else if block, right?

But then we also get this why not 23 message

and that's of course coming

from this if block here.

So nine is of course different from 23

And so a this code here is being executed.

But now if we actually use the 23,

then only this line of code is executed.

And this one here isn't

because the favorite number

is now equal to 23.

And so of course, it doesn't make sense

to then execute this one here.

So sometimes we need the different operator

and sometimes we need the equality operator.

Just choose whatever you need

to solve any particular problem.

In both cases, just make sure

to use the strict version of the operator