Type Coercion

[00:00:00]
>> WebDevSimplified: Now the next thing we need to talk about is type coercion. I mentioned how in JavaScript, the types are just defined, they are not defined ahead of time. JavaScript just figures out the type for you when your code actually runs. And sometimes you may have one type and you need to convert it into another type. This is called type coercion, for example, converting a number to a string or a string to a number.

[00:00:19]
And in JavaScript there are two main ways that you're going to have type coercion. You're going to have something called explicit type coercion, where you, as the programmer, tell JavaScript, "Hey, I want you to change this variable to another type," or you're going to have something called implicit type coercion where JavaScript is doing that automatically for you behind the scenes. Now the first one I want to look at is explicit type coercion because this is the one that is hopefully what you're going to use more often than not, and it's relatively self-explanatory because you're in control.

[00:00:46]
For example, with this code, I have a constant variable called a and it's set to a string that has a one inside of it. So while this looks like a number, it's technically a string because I have it wrapped inside quotes. And when we check the type, you can see it prints out a string. Now if I want to convert that number to an integer, which is just a whole number type, I can use a function called parseInt.

[00:01:06]
This is built into JavaScript. This is a function that takes in any string and it's going to convert it into a number for me. So it takes this string, which has the number one inside of it. It finds that number one and says, "OK, this string means number one," and now number a is set to 1 as an actual number. So when I check the type of it, you can see it set to a number. I can dive into this a little bit further, and we can actually print out what a or the number a is.

[00:01:31]
And you'll see on the right hand side here it actually prints out that number one for us. The interesting thing about parseInt is it just finds the first number that we have inside of here. So if I have some other code inside of here, it'll still print out one because it just ignores all the rest of the stuff and finds what the actual number inside my code is. So even though it has this extra stuff at the end, it just sees that there's a one inside of here and uses that to parse your number for you.

[00:01:53]
Now there's two different ways you can parse from a string to a number. There's parseInt and there's a function called parseFloat. They both do the same thing, converting a string to a number. The difference is that parseInt works with integers, which are whole numbers, so anytime there's a decimal portion, it just removes that completely. So here are decimal 1.3. If we use parseInt, it'll return to us the number one while parseFloat allows us to work with numbers that are decimals, and commonly in programming you'll hear the word float.

[00:02:21]
That just means a number that has decimal points. It's called a floating point number. It's just shorthand for that. So if you see parseFloat, that just means a number with decimals. So when we call parseFloat and we pass it in 1.3, it properly gives us back 1.3. Now this may be a little confusing because in JavaScript, there's just one type, it's number. Number represents whole numbers, decimals, it doesn't matter.

[00:02:41]
But technically, behind the scenes when you're using parseInt and parseFloat, they're referencing either only whole numbers or only decimals, even though they both fall back to that same exact number type. Now if you want to convert a variable to a string, this works with pretty much any variable type out there. You can call the toString function that is available on every single value inside of JavaScript.

[00:03:03]
So we just give a quick copy of this code. And we'll paste this over. You can see here my number 1.34. I'm calling toString on that particular number and that returns to me a string number. So essentially it just takes that and it wraps it inside quotes. If we look at the actual return value here, you can see it's 1.34, but instead of being a number, it's specifically in quotes. It's a little bit hard to see, but if I copy this down and I print out my number a second, you actually notice there's this blue coloring to my number while the string is white.

[00:03:31]
Generally, to be able to differentiate between strings and non-strings, JavaScript will print out the string in like a standard color such as white or black, while it'll print out things like numbers, booleans, and other keywords inside of this blue color. For example, if I print out true, you can see that also prints out in that blue color, while if I print out the string true, it prints in that white color.

[00:03:50]
So if you're ever confused in the console why something may look like a string, even though it's not, that's just because of how it prints out. Just look at the coloring if you need to understand. And also if you're ever not sure, just throw in that typeof keyword, and that'll give you a really clear explanation of what that type is. So these are all the ways you can essentially convert from one type to another type inside of JavaScript.

[00:04:10]
But JavaScript sometimes does that conversion for you automatically, which is where a lot of confusion comes in with different things. This is called implicit type coercion. For example, we already talked about how you can use the plus operator to add together two different numbers, or how you can add together two different strings to give you a specific string. And here we have a constant a which is the number 1.

[00:04:31]
And a constant b, which is the string with a number 3 inside of it. And when I add those two together, what do you think happens? You may think, "OK, it's going to convert 3 to a number and it's going to print out 4," but that's actually not what happens. Instead, when you have a number and a string being added together, JavaScript converts the number to a string first and then does the addition afterwards.

[00:04:51]
So instead of printing out 4, it actually prints out the string 13. So this is a little bit of a confusing thing is that JavaScript does this automatic conversion for you. So when you're dealing with variables that have different types and you're starting to do operations on them, it's important to understand that JavaScript will first do some type of type coercion for you behind the scenes. This is pretty much the same thing as if you were to manually convert your number to a string before you do the addition, and I would recommend a lot of times if you're seeing this implicit type coercion happening by JavaScript, I would recommend trying to explicitly convert what you want.

[00:05:25]
For example, if you wanted to add these two together as numbers, first make sure you convert the string to a number before you do that addition. That way you always are guaranteed to get the exact behavior you want. And you may think, "OK, well, I just need to remember anytime I do an operation, it'll convert everything to a string." That's actually not true because unlike addition, subtraction and multiplication and all the other operations work completely differently.

[00:05:49]
If I have my same number 3 and my string of 1, if I subtract these, it'll actually convert the string into a number and then do my subtraction, giving me the value of 2. Or for example, if I multiply them, it'll convert the number 1 or the string 1 into the number 1 and then multiply them together. So again, it's a little bit confusing to understand exactly how these work because different operators behave differently for converting different types.

[00:06:09]
This is why again I recommend if you know you have values of different types, try to do that conversion beforehand so you're clear what behavior you want. If you want to add numbers, convert things to numbers. If you want to add strings, convert them all to strings. Before you do that, now I would say when it comes to this, always use the explicit conversion whenever you can. Obviously you can't entirely avoid this implicit automatic conversion, but as much as you can, try to use these functions to do the conversions for you that way you don't have to worry about JavaScript automatically doing something different than you actually expect because I can't tell you how many times I've written code that looks like this, and I end up with a 13 instead of a 4 and I'm confused why it's not working like I expect it to.