JavaScript Type Pitfalls

[00:00:00]
>> Anjana Vakil: TypeScript What is it Why would we possibly need it And how would we work with it These are the things that we're hopefully going to walk away with some solid answers to from this course, and we're going to take a moment before we start getting our hands on TypeScript to zoom out and think about why TypeScript came into being in this world What are the problems that TypeScript solves

[00:00:30]
Like what is its usefulness for us And then we're going to get hands-on and we're going to start talking about that how part And there are many different ways to TypeScript We're going to get started with some very concrete small ways to run it, and through the rest of the course we're going to evolve how we work with TypeScript But for this first part, we're going to start understanding what it means to check types in our code

[00:01:02]
JavaScript What a wonderful language Have you ever seen messages like this in your console Cannot read property of undefined Thanks JavaScript What are you talking about Cannot set properties of null I wasn't, it shouldn't be null Why are you, it's an undefined is not a function I know undefined isn't a function, but there's supposed to be a function there, JavaScript No, just me

[00:01:33]
I'm the only one that this has happened to Anybody Anybody seen stuff like this Yes, I'm getting a few nods and hopefully a few Oh as well Or what about this Speaking about how our users are served by our code, you ever like find code that's running and you're pretty sure there's supposed to be some kind of data there, but all you see is object, object, as if that was helpful, thanks JavaScript

[00:02:06]
Yes, I'm seeing some nods I'm like, fun, fun, scavenger hunt if you want to share any of the broken sites that you have recently seen object object on And then sometimes you might have run into things in JavaScript that are just super weird And there is an oldie but goodie talk by Gary Bernhardt called wat, where it goes through not just JavaScript, but a few lapses or surprising like what is happening things about a few different languages, including JavaScript

[00:02:42]
Really quickly, I'll show you a small excerpt from this talk Let's talk about JavaScript Does anyone know in JavaScript what array plus array is Well, let me ask you this first What should array plus array be Empty array, I would also accept type error That is not what array plus array is Wrong, wrong Array plus array is empty string Obviously, I think that's obvious to everyone

[00:03:17]
Now what would array plus object be This should obviously be type error because those are completely disparate types Does anyone know what this is No, close, no, far away, it's object Right, right, nicely done Now, of course, because this is plus, so you can flip the operands and the same thing comes out So if we do what No, that's just an object If you do object plus array, you get exactly the same thing, which, as you can see, you do

[00:03:51]
And finally, the only one of these that's actually true is, because, you know, you add arrays, you get empty string, that doesn't make sense, but an object plus an object is actually not a number So this one's actually right And exactly, right Like what is even going on in this lab I just, I don't even understand what person with a brain in their head would think that any of this is a good idea

[00:04:22]
Yeah OK, OK, I'm not making fun of languages OK OK, so Today we perhaps learned, perhaps you've run into these things before, but some weird stuff happens in JavaScript and some weird values come out that are not the type of data we would expect And in fact, speaking about wats in JavaScript Did you know you can write JavaScript without any alphanumeric characters So this is a fun fact

[00:04:57]
There's a great talk about there's another oldie but goodie by Claudia Hernandez about JavaScript in Wonderland, includes a lot of other fun things, but one thing highlighted there, someone implemented a version of an esoteric language that uses non-alphanumeric characters that is actually valid JavaScript So for example, this absurdly long series of parentheses and pluses and exclamation points is valid JavaScript

[00:05:36]
This is a way to write alert one And if I run this in the browser, for example, so we're going to look at what this is in a moment This is the TypeScript playground, but suffice it to say it's an interactive place where I can run code, and if I run this ridiculous piece of code, indeed we get an alert one What Why is this possible Should this be possible Do we want this to be possible

[00:05:59]
These are questions that we need to ask ourselves as JavaScript developers So, what is going on here Why do these things happen Why does JavaScript surprise us so much of the time with the types of data that move around our programs And that's because the type system in JavaScript has a couple of characteristics Now when we talk about types in a language, we're talking about how that language handles data of different characteristics

[00:06:37]
So, for example, strings or numbers or objects These are all different types of data And some languages handle types and how types kind of flow through the program differently JavaScript handles them with a type system that is very flexible, which can be a plus and angle brackets and exclamation point, or it can be a minus sometimes So the thing is, types in JavaScript are what we call dynamic, meaning the types are figured out by JavaScript as the code runs

[00:07:18]
So JavaScript does not know in advance what kind of data you're going to have in your program It's going to figure it out as it goes And we're going to talk about how that works a little bit later We also have in JavaScript what are called weak types This means that if JavaScript sees a type of data that it's not really expecting, like a plus between an array and an object, it's going to try to coerce, which just means switch the type from one thing that's unexpected, whatever it initially was, to something that JavaScript can do something with

[00:08:09]
And that's what causes all those wats where, for example, arrays are coerced to empty string Empty arrays are coerced to empty string because JavaScript knows how to plus concatenate two strings together and so it's going to try to figure out some way of doing its operation by switching the types out from under us Now that can be helpful sometimes when you wrote the number as a string, but you're really trying to add it to a number, something like that, but a lot of the time it can bite us

[00:08:52]
So let's drill into what this means in practice a little bit When we talk about dynamic types, it means that, for example, in JavaScript, when we have a variable, the value of that variable can change, and the type of the value can also change over time in our program So for example, if I assign a variable called number, if I assign a pi, let's say, or a few digits of it, to the variable number and a string not found to the variable string

[00:09:34]
Each of those variables, JavaScript then sees dynamically, oh, OK, number is a number type, and that means JavaScript's going to give us a whole bunch of like out of the box properties from the prototype of numbers It's a little out of scope for us to talk about how that all works right now, but suffice it to say now I can call number methods like for example, toFixed on my number and it'll round it off to 3

[00:10:01]
Or I can call stringy methods on my string, like toUpperCase, and it'll be like not found instead of not found So that's all fine and good This is all normal and this is often what we want JavaScript to do We don't want to have to like write a bunch of verbose code We want it to just like get the value and help us do stuff with it However, later in the codebase, or perhaps your coworker's side of the codebase, we can swap out totally different types of data into these numbers

[00:10:36]
So I can swap the value of number to be a string, IE, and I can swap the value of string to be a number 404 And now the same exact code that worked before, because the types were different, no longer works So if I now call number.toFixed, JavaScript's like, I don't know what you're talking about Number's a string now It doesn't have a toFixed method And likewise, I don't know what string.toUpperCase means because string is actually a number, so it doesn't have stringy methods, like toUpperCase

[00:11:16]
And so this can cause some headaches when we expected that the type of a variable or a piece of data through our program is going to be one thing, but it turns out that JavaScript was perfectly happy with it becoming something else So this is how dynamic types can both be helpful because JavaScript just like tries to figure it out Thanks, man Very cool of you, bro, but sometimes that doesn't work and we get these type errors

[00:11:53]
So, this is one of the issues that many developers have had over the years with JavaScript And the other one, as we briefly talked about and as Gary Bernhardt illustrated, is that because types in JavaScript are weak and because JavaScript is going to try to make sense of whatever data you're giving it, using whatever other information it has as it runs your code, it's going to not really listen to you when you say, oh, in 11 string

[00:12:32]
The thing on the left is a string one, but the thing on the right is a number JavaScript's going to say, oh no, the thing on the right can't be a number because I don't know how to add a string and a number So you must have meant it was another string So, here you go Here's your concatenated string, 11 Like, thanks, JavaScript, very helpful So is this because of the coercion Is this is essentially coercion

[00:13:00]
Exactly, yes So when we say that types are weak, we're talking about the property of JavaScript that it can like it can change the type of data for us And there's not really, well, there are some workarounds, but we'll see, it's not always easy to tell JavaScript, no seriously, that's supposed to be the number one And likewise with other values, right Like if, interestingly, with the minus operator, it's going to do the coercion on the other type

[00:13:40]
It's going to sort of coerce this string to a one and then subtract one, and then give us back the number 0 And it's kind of an idiosyncrasy of JavaScript that you sort of have to just know that certain operations are going to encourage JavaScript to coerce these weak types to try to make sense of it in sometimes unexpected ways And the same thing happens, for example, when it's coercing these empty arrays, which should be type array, but it's like, um, but there's a plus there, so you must have meant strings

[00:14:21]
And there's nothing in the array, so you must have meant the empty string twice So I'm going to add those together, concatenate those together and give you the empty string Here you go Next JavaScript And likewise, when it sees the plus, but there's an object on the right-hand side of the plus, it's going to say, oh, OK, so I guess that we're not trying to concatenate strings I guess you meant that you wanted some kind of object

[00:14:54]
I don't really know what JavaScript is thinking when it's trying to add an object to an empty array, but either way, it's like, well, I guess I see that object on the right-hand side, so you were probably expecting an object to come out of this So here you go Here's your object Oh, JavaScript so helpful So these are characteristics of types in JavaScript that over the years have become somewhat of a liability for us as web developers, if we're writing JavaScript

[00:15:34]
And if you're used to writing other languages, like very different languages than JavaScript, you might have encountered systems, type systems that do not do this kind of thing where if I try to add a string to a number and the language doesn't know how to do that, it's not going to try to coerce anything, it's just going to error out or do something else that will indicate that that's not allowed.