Common JavaScript Quirks

[00:00:00]
>> Let's talk about JavaScript. And I like to do it with this little game here, who wants to be a Javascriptaire. And for this, I'm gonna need a volunteer. So this is totally different than a game show called Who Wants to Be a Millionaire? Because I do not have any license to use that whatsoever.

[00:00:17]
And so that is definitely not read just asking you, are you ready to play Who Wants to be a Javascriptaire? Are you ready?
>> Yes.
>> All right, so this is gonna work just like it. I'm gonna ask you a multiple choice question. Five of them. You have one lifeline, one ask the audience whereby round of applause, they can tell you what they think the answer is.

[00:00:37]
Audience, no cheating. No opening up your console and typing in like what is the answer to this. Honest system. All right, you ready? All right. What does this JavaScript code return? The string, poop emoji dot length. Is it A ,undefined. B 1, C 2, or D, it's an error?

[00:01:02]
>> I know it's not D, and B would be too easy. So, C.
>> C, final answer?
>> Yes.
>> All right, it is C. In JavaScript, the string length property returns the number of bytes actually code points, rather than the number of characters like we expect. Unicode characters like all emojis are actually two bytes to describe.

[00:01:27]
And so the length of a string will not always be what you expect it if it contains Unicode characters. All right, how about this one? What will this JavaScript code return 0.1 + 0.2? Is it A, 0.3. B, 0.29999 a bunch of things. C, 0.300000 a bunch things 4, or D, the string 0.3?

[00:02:03]
What's running through your head? We got to make this good for TV.
>> [LAUGH]
>> Well, yes, sure. If the answer was A this would probably not be a question.
>> Good call, good thinking.
>> D,
>> Even though [CROSSTALK] I think we can agree that A would be the the expected choice.

[00:02:19]
>> If a human was doing it
>> [LAUGH]
>> So, neither of those are strings, so probably not D. So either B or C. We're gonna go with B.
>> B, final answer? I'm sorry it is C. So Java scripts floating point operations overflow the rounding precision. In order to use JavaScript floating point operations, you need to use the two precision function to guarantee that you are getting that correct.

[00:02:48]
This is actually a problem in a lot of languages surprisingly. All right, next question. This is probably my favorite. What will the following JavaScript code return? A new date, 2016, 5, 31. Will it be July 1st, 2016, June 31st, 2016, May 31st, 2016, or May 31st, 2017?
>> So the fifth month is May, which does have 31 days.

[00:03:26]
But again, this is probably not the obvious answer.
>> It might not. Yeah. It might not prove my point that JavaScript is weird if it-
>> Exactly.
>> Does exactly what you think it would do. So if we start counting nodes at 0
>> I don't know. And that would be June 31, which isn't a thing.

[00:03:52]
So, A.
>> A, final answer?
>> Yes.
>> All right, very good, it is A. I think you're the first person to ever get this one right
>> Months, when constructing dates and only months are zero based. So this does indeed specify June 31st, which doesn't exist and it overflows into July 1st, 2016.

[00:04:17]
All right, question four and you still have a lifeline left. What will this JavaScript code return, a new array of 01 and another array, instantiate with two. These are too hard for me to speak. So I'm just going to say look at the slide.
>> Right. So I think what we have here would be an Array within an Array.

[00:04:49]
So not B. I'm gonna ask the audience.
>> All right. Audience, without cheating, what do you think it is by round of applause? Who think it's A? Nobody thinks it's A. Who thinks it's B? Nobody thinks it's B. Who thinks it's C?
>> [APPLAUSE]
>> Okay, who thinks it's D?

[00:05:20]
>> [APPLAUSE]
>> All right, somewhere in between C and D I think [LAUGH]. The audience isn't collectively sure.
>> D.
>> D? Why do you think it's D?
>> Maybe it's C.
>> [LAUGH]
>> Doo doo. Which one do you think? Waffling between C and D?
>> Yep, we'll go with D.

[00:06:03]
>> D, final answer?
>> No.
>> [LAUGH]
>> C, final answer.
>> C, final answer.
>> Yes.
>> All right, here we go. I'm sorry it was D. Instantiating an Array with multiple arguments creates and Array with those values in it. However, if you instantiate an Array with a single argument, it creates an empty Array with that length.

[00:06:30]
So it could create D with 0, 1 and then an Array with two undefined positions in it. Last question. What will this JavaScript code return? 10, 5, 1 in an Array sorted. Will it be A, 1, 5 ,10. B, 10, 5, 1. C, 1 ,10, 5 or D 5, 10, 1?

[00:07:00]
What do you think a sorted Array in JavaScript would look like? Well, it should look like A, right? But, Yeah, and I used my lifeline, so A, final answer.
>> A, final answer. Sorry, you should have known it wouldn't have been the expected answer. The Array prototype sort's default comparison uses strings.

[00:07:34]
It casts every number or every thing in the array to a string and sorts it then. So the string 1, the string 10, the string 5, is the sorted order, alphabetically. So JavaScript is weird, right? here's so many of those, dozens and dozens and dozens of these bizarre little things that JavaScript acts in ways that we don't always expect it to.

[00:07:59]
And that's just the language, layer on top of that all of the deployment things that we have to do to build JavaScript web apps and no wonder we have lots of bugs. And JavaScript happens, JavaScript is everywhere. Many of our applications JavaScript is the easiest place to change something at the last minute.

[00:08:17]
You need to make one final tweak to that e-commerce site, change how a product looks, where's the easiest place to do it? Throw a little JavaScript on the page. You want change how the checkout flow works? You throw a little JavaScript on the page. Before you know it, an app that wasn't supposed to be all JavaScript is covered in JavaScript.

[00:08:36]
And debugging JavaScript is like being a detective in a crime movie where you are also the murderer. Because we did it to ourselves, right? We wrote that code. The collective we, it might have been Nancy the next cube over, but collectively we wrote it as developers and so it's our fault.

[00:09:00]
And so we need to figure out ways to when we screw up find it faster and prevent it from happening the next time.