Original subtitles

‫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.