All language subtitles for 020 Type Conversion and Coercion.en_US

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 learned about this

before being able to move on further in the course.

That's specially 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.

On 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 webpage for the user to input their birth year.

And these inputs from input fields usually come as strings.

So let's say that the input year

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 dot log,

let's say input year 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 a 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 now get a string

which basically contains the 1991 string

and then the 18 as well. Okay?

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 dot log,

and then the way we convert

this string to a number is by using

the built in number of function.

So we write number, then parenthesis and then input here,

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 these 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 input year 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 input year 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 a 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, we'll look at a string,

will try to convert it to a number,

but it won't really work.

So what do we get instead? we get this non.

Which stands for not a number.

So a 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 type of NaN, so not a number.

And as we 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 of 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 two, 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 no.

That doesn't make a lot of sense.

Now here, we only converted to numbers

and to strings, but not two 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 "faulty" 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 of 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 the 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 of 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 to string, minus 10 to 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 three 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 going to happen?

10 to 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.

'cause that's the only way that

the multiplier operator can work.

And the same of course is true for dividing.

Now, one final example is a logical operator.

So let's check 23, the string again,

greater than 18, the string.

So, do you think this is going to work?

Yes, it does.

So 23, the string is still greater than 18 the string,

because once more JavaScript will convert strings

to numbers automatically.

The only way in which it doesn't do that

is the plus operator and plus operator again,

it happens the other way around.

All the numbers are converted to strings.

Okay. I hope that distinction is now pretty clear.

So just to make sure that you really 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 will write one plus one like this,

and then we say n equals n minus one again.

So what do you think n we'll 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 a 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.

Okay? So let's do two plus three

plus four plus five the string.

And now you actually can really guess

because we can already see the solution there.

Okay? 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 nine, five as a string.

Okay. And another one, 10 minus four minus three,

And keep in mind that these are strings,

and then minus the real number two,

but then plus five to 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 in 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 a string 15.

Okay. And with that,

I think a this would 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 it 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 going to 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.