Coercion

[00:00:00]
>> Kyle Simpson: So let's get into converting of types. Let's talk about how we go from one to another. And I just want to point out that this is absolutely necessary in all programs. All languages, all programs you have to convert from one type to another. It would be total nonsense to consider a program that never needed to go from a number to a string or vice-versa.

[00:00:19]
You can't do anything hardly useful whatsoever without some type of type conversion. And in a dynamically typed language like JavaScript the way we do that is called coercion. So if I start out with msg1 that's got this sentence fragment and then I have a numStudents which is a number and then msg2 which is another character string, another string segment.

[00:00:41]
And I want to put all three of those together into a message. In this case, I'm going to print it to the console. But I might want to render it to the page, or write it to a file or a database or something. Well, you have a problem.

[00:00:53]
Because we've got two strings on either side, and a number in between. And the only way that you can get that number into that string is for the number to be converted to be coerced into a string representation of itself. The good news is that numeric coercion, or string conversion of a number, going from a number to a string, that's pretty well thought of.

[00:01:16]
I mean, there's not much complexity around that. If you have a valid number, and then you turn that into a string, it's probably gonna look exactly like that. There are a few little corner cases, with really, really giant numbers, that it may end up having the exponentiation form or something.

[00:01:30]
But most numbers that you work with, the number 42 or the number 3.14 or whatever, the string form is going to look exactly like what you might expect. And there's further ways that you can control if you had a number with 15 decimal places after it and you wanted to truncate it to two relevant decimal places.

[00:01:49]
There's methods for that, the two fix method, for example. But the point is that 16 here has to get converted to a string so that the plus operator on line 4 can concatenate three strings together. The string concatenation that's happening here is essentially an implicit coercion of that number to a string.

[00:02:11]
And some people like implicit coercion. Some people really don't like implicit coercion. I'm not going to pass a value judgment on which one is right or wrong here. But I just wanna point out that we are assuming something about the plus operator here, which is that it'll go ahead and convert, coerce it for us.

[00:02:28]
And sometimes it might be more preferable to be explicit and tell it, no, no, no, I really want you to convert the string. So that plus operator is overloaded with some behavior that if at least one of the things that we're dealing with in the operation is already a string, it's going to prefer string concatenation.

[00:02:49]
Now you notice here on line 4, I've got the back tick form of that string, which is basically doing kind of the same thing as what we did before. It's just interpolating the value in and notice on line 4 I have a plus with an empty quote. You may have seen that in JavaScript, this is an extremely common, idiomatic way of converting something to a string by adding the empty string to it.

[00:03:11]
And again, we're taking advantage of the fact that the plus operator is overloaded, that if at least one side of it's already a string, everything else is gonna become a string. And it only does numeric math if both of them are numbers. So this is another way of implicitly coercing to a string.

[00:03:29]
Basically, the pattern that we're looking at here with this plus operator overloading is that the only time it does math is when you have a number and a number. Any other time, number string, string number or string string, you're gonna end up with string concatenation. And it's kind of a regrettable choice to have this overloading of the operator, but it is our reality in JavaScript.

[00:03:49]
So you just have to get in your head, if you want the mathematic addition, you've gotta make sure that both of them are numbers. Now, if I take this addAStudent function that I've defined here on line 1, and it's expecting to be able to say + 1 to a thing that we have.

[00:04:05]
We know that the plus operator is susceptible to this type conversion problem or this overloading of types problem. And so when we pass in something to the addAStudent we need to make sure that it's gonna get treated as a number. If I pull a value off of some DOM element, the way I'm doing here on line 6, it's going to come in as a string.

[00:04:26]
Even though somebody typed the number 16 into an input box on a page, when we get it into our JavaScript program, it's gonna be a string because all value properties have strings. And if we wanna do math with it, we're gonna have to convert. And that's what the number function is doing here on line 6.

[00:04:43]
It is converting from a string to a number. And again, remember, there's no new keyword here. Notice that there's no new keyword. We're just calling the function to convert it from a string to a number. By the way, number can be used with any value. So you can convert a boolean to a number, you can convert a string to a number.

[00:05:01]
Anything that can validly be converted to a number, you can do so with this number function.