All language subtitles for 015 Type Conversion and Coercion

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.