The Weird Parts of JavaScript

hey everyone this is kind of a fun video we're gonna talk about some of the weird quirks of JavaScript I will dive into some of the internals how things work behind the scenes we'll look at the spec talk about how numbers are stored but first I want to point out to developers whose work I drew upon heavily here the first one is named Dennis Devon I think that's how you pronounce it he's a great developer I assume I actually haven't know nothing about him but I'm just being nice but as you can see here he has a repository called WTF J s and it just includes tons of examples of odd weird unexpected things in JavaScript and then the second developer very well known Kyle Simpson he's written a bunch of books keeps a bunch of talks on weird KS this book series called you don't know J yes I highly recommend you check it out I quote him a couple times in this video you can find the links to these two repositories in the description as well as the link to my notes all right so this first one is a relic from the early days of JavaScript in most browsers you can write HTML comments in JavaScript and they'll be treated as JavaScript comments so here's an example I wrote a string that deliberately contains key words like break and in and if I try and run it it's completely ignored and if I were to alter it ever so slightly by deleting one of those dashes we get a syntax error so why is this well it has to do with the early days of JavaScript very early when some browsers did not recognize the script tag they didn't know what JavaScript was so they would just take this code and render it to the screen so users would just see a bunch of code showing up because it wasn't treated as code so what developers did is they wrapped their code in HTML comments like this and in the old browsers that didn't know JavaScript they would just treat this whole thing as commented out HTML and not display it but in JavaScript they changed the way the comment works a tiny little bit so in HTML this is opening and closing in JavaScript this is not a closing comment so this is just a one-line comment anything after this on the same line is commented out and as you can see here we don't get the console dot log even though it looks like the comment closes so what they would do in JavaScript instead was this and they would put this below the code that they wanted to hide from the browser and they would put this at the start and then have as much CODIS and needed in here so HTML would ignore all of this javascript would just ignore this line and this line and we still get the console dot log kind of interesting maybe I don't know next up let's talk about whitespace for the most part spacing in JavaScript doesn't matter this is horrendous code and hopefully you would never write this but it does work I can declare a function like this with all these weird spacings and indentations and line breaks and I can still call say hi but there are some weird cases where spacing matters here's one there's a method called too fixed which works on numbers so let's make a variable called n and we'll set it equal to 35 and if we call n dot - fixed you pass in a number of digits for after the decimal point so we could do 10 what we'll just do one here and that works if I use a variable but it doesn't work if I do 35 dots to fixed of one invalid or unexpected token but this is a number it's kind of odd but it does work if I add a space right there or any other spaces totally fine the only time it's a problem is if this dot if the period goes right after the number even though that's how we always call number methods or any methods and the reason is that javascript is getting confused because this is usually used on numbers with a decimal so you would call it like this and so there's usually a dot before the method dot it's just kind of a weird odd situation where if you were calling this on a whole number you would need to add a space there so speaking of spacing and oddities it's now time to address one of the worst features in JavaScript something called automatic semicolon insertion so this is the subject of lots of great vlog posts actually linked to one down at the bottom so in JavaScript the rules around semicolons are kind of odd there are very strict rules in the spec about what needs to have semicolons after it the is a language they use in the spec certain statements must be terminated with semi-colons and then a little bit later for convenience however such semicolons may be omitted from the source text in certain situations so to summarize certain statements must have a semicolon after them always but if you leave it off javascript is going to try and help you and add them back in for you automatically for example something like this if you have a variable declaration the spec says there must be a semicolon there but I didn't put one there and it still works and for the most part you can get away with no semicolons and you usually won't run into issues but here's an example of where it matters in this scenario it doesn't work the way we want it to so it's a very silly function called do thing it takes a color and it returns an object where we have fav color set to in our case purple so I execute it and what do I get undefined so why is do thing undefined well JavaScript is automatically inserting semicolons not really where I want them to be it's putting one right here the rules say that the return statement has to have a semicolon after it and I didn't include one so it decides to automatically insert one here so we end up returning undefined but if we had simply done this here and then I could just space it out however I wanted this will now work because now even without the semicolons JavaScript is able to figure out that the semicolon should not go here because we're returning something an object where does the object end and so it puts a semicolon there so this is definitely an annoying feature in JavaScript and it's why you should just always put semicolons where they need to go learn the rules about it you can find them in the spec next up let's talk about some comparison weirdness at some point in every JavaScript developers early education somebody tells them never use double equals always use triple equals and that's generally a good idea double equals is weird now the rules that it follows are very explicit they're very strict and it's laid out clearly how it should work it's just sometimes surprising so as a simple example let's take a value like 2 2 is a truth eval you if we double knot it it turns true so the opposite is false that means that two is truthy so a lot of people think that means if you use double equals two is going to double equal true because people think that we're testing if two is true the-- comparing that to true but that's not actually how it works the rule specifies something different so let's step through it for another example if we have an empty array an empty array is also true the-- it's an object in all objects in JavaScript are supposed to be true the-- except i'll show you an exception after this the opposite is false double knot is true the-- so then why is this true how is one thing equal to the exact opposite or what we think is the exact opposite well unfortunately that's not how it works so let's step through the abstract equality operator aka double equals this is from the spec so it talks about x and y where x is the left y is the right so in our situation this is an object and what is this well this is going to evaluate first and we just saw that not empty array is false so we're comparing empty array to false so what do the rules say about this is type X the same as type Y nope just get ball of that null undefined no number basically we go down to number seven right here if typeof Y is boolean return the result of the comparison x equals equals to number y okay so the steps were so far we have this and that right side evaluates to false so we end up with empty array double equals false and then we just hit this rule number seven that says return the result of the comparison x equals to number of y so x equals 2 number of y well there is no two number method or function that we can call on our own but if we go to the actual spec let's click on to number it's defined here how it should work it's called an abstract operation and if we go to boolean which is the argument type the result is positive zero we'll come back to that if the argument is so we passed in false so that means we're now working with this empty array double equals zero so then we look through the rules again what works this time we have to go all the way to the bottom where it says if typeof X is an object empty array is an object and type of y is either string or number we're now going to try two primitive of X double equals y so what is too primitive this one's a little more annoying to explain it's another abstract operation in the spec but it's not as clear-cut if we look at two primitive what you'll see is that if you pass in an object it returns a default value for the object well how is that default value determined well usually a hint is passed in it's really annoying to try and explain but here it says when the internal method is called with no hint then it behaves as if the hint were number unless the object is a date object in which case it behaves as if it were string so two primitive called on an empty array behaves as if the hint was number which means it's going to try and convert empty array to a number and the result of that is zero and then we end up with zero double equals zero which gives us true data so it's very weird and counterintuitive but it's all by the rules this is all exactly how it should work it's not a buggy oddity it's doing exactly what it should so sticking with comparisons but this time with the strict equality operator triple equals let's talk about not a number so this is something that I've seen a lot of students get confused about why is not a number not equal to not a number isn't this the same value and the explanation is kind of interesting first of all the reason this happens is based on the spec in the spec for triple equals it says if X is not a number return false if Y is not a number return false so there's a special carve out for not a number why is that well we have to talk briefly about floating-point numbers how Java Script stores its numbers it follows something called the OEE standard for binary floating-point arithmetic but the interesting thing is it differs from that standard in one place this OEE stay says that there should be nine bajillion whatever number this is distinct not a number of values and in JavaScript there is one not a number value there represented a neck mascara at least as a single not a number value so then the question becomes why on earth would this standard ie EE why would it have so many not a number values well here's a quick crash course on how floating-point numbers are stored according to that spec every not a number value follows this pattern so everything you see here is either a 0 or a 1 and for not a number there's a sign at the beginning a 0 or 1 positive or negative and then we have this part which is called the exponent field it has to be all ones in order for the value to be not a number and then there's this massive chunk called the mantissa that can be any combination of ones and zeros except all zeros if it's all zeros we're now representing infinity so there's this massive empty area it's not going to be empty but it's up in the air it could have any value in here or almost any value of ones and zeros and it would still mean not a number so what do we do with this chunk it's kind of an interesting story one of the designers of the OEE standard William kahan kahan I don't know he wrote in his personal lecture notes that the idea behind it was that those bits could store information about where the not a number came from how we arrived at not a number because there was a bunch of different ways to get to not a number and that it would be useful to store that information there but JavaScript doesn't do that most languages don't but I did fall down a bit of a rabbit hole and I found this old listserv online or somebody was talking about a proprietary system that came up with where they could store information and data in this not a number mantissa and that they had patented it but they didn't want to talk about it because they were starting a business with this idea so it's interesting but the point is the spec for how floating numbers should work says that there's a ton of different options for not a number this many different values however xmas script differs from that and says we're just going to implement one value and that's why we have this this rule says if you have not a number and you're comparing it to not a number they are 100% different every time even if they're not actually different to the language itself next just a quick thing not everybody knows this there is a positive and negative zero in JavaScript and this has to do with what we just saw up here every number in JavaScript follows this pattern not necessarily with the ones here that specifies not a number but every number is a sequence of ones and zeros and that first digit is the sign so zero is stored like this positive zero and negative zero is stored like this so if we try to do some math like 5 times 0 we get positive 0 5 times negative 0 we get negative 0 but what's interesting again is if you try to triple equals 0 and negative 0 it's true even though we just saw they are definitely different values we got a different outcome once again it is in the spec it says if your triple equaling positive zero and negative 0 always return true and lastly let's talk about this odd case of document dot all so it's standard for JavaScript or for xmas script says all objects are considered true the-- but there is this weird exception for this one object document all which is an array like object it contains a bunch of nodes on the dumb every note on the dom before methods like document dot get element by ID we're around people would use document dot all if I test it out document at all this is what I get this array like collection and it is definitely an object if I call document at all instance of object I do get true so it should be true the-- but if i call type of document dot all why do i get undefined if I do document dot all double equals undefined that's true and it double equals null according to the basic rules in the standard it should not behave this way but there is another weird exception and the reason for this is that back in the day a lot of people would write code like this if document dot all and this would target browsers that did not have the Dom or had some weird legacy version of the Dom I actually can't find much information about it but generally it was used to test for old versions of Internet Explorer so if document at all was not a thing then this code would not run because this would be undefined but then browsers like Internet Explorer leveled up and got better and there was a problem because there was all this legacy code and they didn't want people to be able to do this anymore but they also didn't want to stop supporting all these old websites and just legacy code bases so what they did was make a really weird exception this is how kyle simpson puts it he says so we can't remove documents at all completely but Internet Explorer doesn't want this document at all code to work anymore so that users in modern IE get new standards compliant code what should we do I've got it let's bastardize the j/s type system and pretend that document dot all is false e and that's what they did document dot all is in the spec as a false e value even though just before that it says all objects are truth e anyway there's a lot more to talk about but I'm going to end it here hopefully you found some of that interesting it's kind of fun stuff maybe you'll learn something about not a number or how comparisons work in JavaScript and yeah thanks for watching

Channel: Colt Steele

Views: 49,746

Rating: 4.9430943 out of 5

Keywords: js, javaScript

Id: LYFTGQuwlh8

Length: 16min 53sec (1013 seconds)

Published: Thu Aug 29 2019