Jonas: In this video,
we need to go back to value types.
So types are one of the fundamental aspects
in programming, and converting between types
is something that we do in every programming language.
For example, converting a string to a number
or a number into a Boolean
is something that we do all the time.
And so it's important that we learn about this
before being able to move on further in the course.
That's especially true for a language like JavaScript,
which sometimes behaves in a weird way,
as we will see in this video.
Now, in JavaScript, there is type conversion
and type coercion.
So they sound very similar but are different.
So type conversion is when we manually convert
from one type to another.
One the other hand, type coercion
is when JavaScript automatically converts types
behind the scenes for us.
So that's necessary in some situation
but it happens implicitly, completely hidden from us.
Okay?
So let's start with type conversion,
which remember, is when we explicitly want
to convert from one type to another.
So let's say that we have an input field
on a web page for the user to input their birth year.
And these inputs from input fields usually come as strings.
So let's say that the inputYear that we get
from the user interface
is a string with the value 1991.
But now if we want to do some calculations with this,
this won't really work.
So let me show that to you.
So console.log.
Let's say inputYear,
and now plus 18.
And so like this we can calculate
in what year the person will become of full age.
Now, remember that when we have a string
and add something to the string,
it will basically concatenate the strings.
So we can't expect that this actually adds 18
to this number here because it's a string.
So let me show you what I mean with that.
And so indeed, we know get the string,
which basically contains the 1991 string
and then the 18 as well.
So we need a way of fixing this,
which means that we need a way
of converting this string to a number.
So let me actually log that here first.
So console.log.
And then the way we convert this string to a number
is by using the built-in Number function.
So we write number,
then parenthesis, and then inputYear.
And we will learn exactly what a function is
and why it works this way in the next section.
For now, just know that we can basically convert strings
to numbers by using this function,
which we execute using these parenthesis here.
So we have this parenthesis inside this parenthesis now
but don't get confused by that.
So doing this operation here
will then return the string as a number.
So let me show that to you.
And so indeed, now we get 1991 here
in this pink color basically.
And the colors might change throughout the time.
By the time I record this video,
numbers are pink and strings are just this white.
Let me actually print them both.
And so that should make it really visible
that yeah, the first one is a number,
the second one is a string.
Okay, but now one thing that's really important
to note here is that the original value
is actually not converted.
So the inputYear variable itself,
so this one, is still a string, right?
It still holds the variable 1991
as a string and not as a number.
That's why down here in this log,
where we do this calculation,
the result is still this string
because again, the original inputYear variable
is still a string.
Using this number function
will simply give to us a converted version.
So if you want to perform this calculation,
we need to use Number here as well.
And so this will now convert the number
and then to that number, the 18 will be added.
And so now we should end up with something like 2009 I guess
and indeed, that's right.
But now what if we're trying to convert something
to a number that is impossible to convert?
Let's try that with a string
that doesn't really contain a number.
So let's try to console.log converting
to a number the string Jonas.
So JavaScript will look at the string,
will try to convert it to a number
but it won't really work.
So what do we get instead?
We get this NaN, which stands for not a number.
So JavaScript gives us this not a number value
whenever an operation that involves numbers fails
to produce a new number.
So basically, not a number actually means invalid number.
It's not really not a number.
And let me actually prove that to you.
So we can check the typeof NaN.
So not a number.
And as you will see,
the weird result of this is that the type
of not a number is actually number
and so again, not a number actually means an invalid number.
It's still a number somehow
but it's an invalid one.
And so again, we get not a number
whenever an operation involving numbers fails
to give us a new number.
Okay, so that is converting strings to numbers
but, of course, we can also do the opposite.
It's a little bit less important I would say
but I still want to show it to you.
So to do it the other way around,
we use this String function.
And that's quite straightforward, right?
Just keep in mind that we need to really start it
with a capital S, just like here the Number function needs
to start with a capital N.
Otherwise it's not gonna work.
So we get 23.
And remember that whenever the value here is white,
then it means it is a string.
So it looks kind of the same.
Let's again log both just to make this point.
So the pink one is the value
that actually has the number type
and this one has the string type.
Okay, so again, this one is not as important
but I still wanted to mention it.
Now, JavaScript can only convert to three types.
So we can convert to a number, to a string
or to a Boolean.
But we cannot, for example, convert something
to undefined or to null.
That doesn't make a lot of sense.
Now, here we only converted to numbers
and to strings but not to Booleans.
And that's because Booleans behave in a special way.
And for that reason, there is a separate lecture coming up
on so-called truthy and falsy values.
Great, so that is type conversion
where we do manually convert
from one type to another.
However, in practice,
we rarely have to do it manually
because JavaScript actually does type coercion automatically
for us in many situations.
So let's talk about that now.
And let's just separate this here
with some comments.
So type conversion.
And then
type coercion.
So basically, type coercion happens
whenever an operator is dealing with two values
that have different types.
So in that case, JavaScript will then, behind the scenes,
convert one of the values to match the other value
so that in the end,
the operation can be executed.
And actually, we already saw that happening
if you think about this.
So let me show that to you,
starting with strings.
Remember how we did this.
I am and then a number.
Let's say 23.
And then another plus years old.
So we already know that this is gonna produce a string
that says I am 23 years old.
But how does that actually work?
Because 23 is a number.
So we have different types here, right?
We have a string, a number and another string.
So let's check and indeed, that is what happens.
And it works this way because of type coercion.
So in JavaScript, the plus operator
that we used here triggers a coercion to strings.
And so whenever there is an operation between a string
and a number, the number will be converted to a string.
So thanks to type coercion,
writing this would be exactly the same
as writing this.
Right?
Because again, the plus operator
will convert numbers to strings.
And the same actually happens in template literals.
It also takes all the number values
and also converts them to strings.
Now, if JavaScript did not have automatic type coercion,
like many other languages don't,
then we would have to manually do this
like we just learned before.
Then we would have to do String 23
and then this would be the only way that this would work.
But luckily for us,
JavaScript has type coercion
and so this will happen completely automatically
behind the scenes.
Now, actually not all the operators
do type coercion to string.
So let me show you something else.
So if we do 23, the string minus 10 the string
minus three, what do you think will happen now?
So let's actually check
and it gives us 10.
So what happened here?
It looks like this time JavaScript converted
the strings to numbers.
And indeed, that's why we get 10
because 23 minus 10 is 13
minus 3 is 10.
And so what this means is that the minus operator
actually triggers the opposite conversion.
So in this case, strings are converted to numbers
and not the other way around.
So instead if we use the plus,
what do you think is gonna happen?
Then the three is converted to a string
and then the three strings are concatenated.
Okay?
So this is a very important distinction
to keep in mind
because this actually confuses many JavaScript beginners
when they don't know about this.
So let's try another one here
and I'm again using 23 the string
times two, the string.
And again, you will see that these values
are gonna be converted to numbers before.
And indeed, that's why we get 46
because both of them are now converted to numbers
because that's the only way
that the multiplier operator can work.
And the same, of course, is true for dividing.
Okay, so I hope that the distinction between type conversion
and type coercion is now pretty clear.
And now just to make sure that you actually got it,
let's play a game called guess the output.
So that's a game I just made up.
So I want you to guess what happens here.
So I'll write one plus one like this.
And then we say n equals n minus one again.
So what do you think n will look like
when we log it to the console?
So essentially, we start with one the string,
then we add one and then we subtract one.
So take a moment to think
what this should look like
and then let's take a look at the solution.
And it is 10.
So that's a bit counterintuitive
but according to the rules
that we just learned before,
it actually makes sense.
So here in the first line,
one plus one will actually turn out
to be 11, the string
because we have one string here
and then the plus operator
will automatically convert the number
to a string.
And so the result of this one is the string 11.
But then here we have the minus operator.
And in the minus operator,
whenever we have a string or more strings,
it will then convert it to a number.
And so here the string 11 will be converted
to 11 the number and then 11 minus one
is, of course, 10.
Okay, let's do one or two more
and let's do it in the console here.
And we can actually clear the console
of all this clutter here
by clicking on clear console.
So let's do two plus three plus four plus five, the string.
And now you actually can't really guess
because we can already see the solution there.
So let's try to understand what happened here.
So we start here with two plus three,
which makes five.
Then five plus four makes nine
and then we end up with nine plus five, the string.
And then as you already know,
since we have a string,
the plus operator will convert the other operand,
which is nine also to a string
and then we end up with 95 as a string.
Okay, and another one.
10 minus 4
minus three,
and keep in mind that these are strings,
and then minus the real number two.
But then plus five the string.
So again, this looks very weird
but the logic is kind of the same as before.
So we have two values that are subtracted
and so JavaScript will convert them both to numbers
and so the result of this is six.
Then six minus three is three.
Then three minus two is one.
And then we end up with the same situation as before.
So this one will be converted to a string
and then we end up with the string 15.
Okay.
And with that, I think this should be pretty clear now.
And you might be wondering why we're talking so much
about this but it's really important
that you know about this right from the start
so that you can write your code
with all of this in mind.
Now, many people actually don't like type coercion
and think that it's a bad practice
to rely on type coercion.
One reason for that
is that type coercion can, in fact,
introduce many unexpected bugs into our program.
However, this only happens when we don't really know
what we're doing.
So when we don't know about the stuff
that I just showed you
because if you know, then it's way easier
to avoid these errors.
So in my opinion, coercion is actually a great mechanism
that is gonna allow us to write a lot less code
and also to write more readable code.
So really make sure to take some time
to understand how type coercion works
and then just embrace it in your code.