Some JavaScript Quirks

00:00 In the previous two lessons, I did a deep dive on the syntax of JavaScript. This is the first of several lessons where I talk about the gotchas of the language—all those things that don’t behave the way you expect, especially if you’re a Pythonista.

00:15 JavaScript’s original intent was to do some client-side form validation on web pages. The first version of the language inside of the Netscape browser only took ten days to write. JavaScript becoming ECMAScript has helped bring consistency to it and made it far more standardized, but how it got there was pretty organic.

00:34 Many of the browser makers wrote non-standard features into the language and then if they grew popular, they got pulled into the standard later. It wasn’t really until ES6 that things started to settle down. This organic growth combined with the language’s simple, original intent has made for some odd language decisions.

00:52 Some of these things are behaviors that Pythonistas just wouldn’t expect and some are just plain wacky from a computer science point of view. Many of the things I’m going to talk about in this lesson can just be avoided by using the more modern parts of JavaScript. That being said, you’re likely to run into some of these in the field.

01:10 The first set of quirks I want to talk about are those with arrays. JavaScript’s Array objects don’t behave like lists or tuples in Python or like arrays in any other C-based language for that matter.

01:21 They’re closer to the idea of an ordered dictionary where the key is the index number of the array. If you delete an item from an array, it removes the item but doesn’t remove the space it was in. To do what you’d expect, you have to use the .splice() method instead of the delete keyword. Arrays support sorting, but by default only sorts strings. Because of JavaScript’s auto typecasting, when you go to sort numbers, they’ll be sorted alphabetically.

01:49 And the one that bites me all the time is the in keyword. In JavaScript, the in keyword tells you if a key is in an object. Unlike Python, it won’t tell you if an item is in an array.

02:00 It will tell you if there’s an item at that index in the array. If you use it like you do in Python you might even get back True if it happens that the number in the array you’re checking for is a valid index.

02:11 I can’t count the number of times, I’ve blown off my toes with this one. Constantly switching back and forth between Python and JavaScript makes this an easy mistake to make.

02:22 Let’s take a look at these quirks in the Node REPL. Here is an array of fruit. Now I’ll delete the second item. Here’s the resulting array. Well, that’s fun, isn’t it?

02:41 As the spot is still there, the length of the array hasn’t changed. It gets weirder. You can assign indexes of the array out of order.

02:55 It just creates a bunch of empty spaces. To get the more expected behavior, use the .splice() method on the array. Let me show you that with a new array.

03:14 Splicing on index 2 for a length of 1 item returns the single item at index 2 and modifies the array. Here’s the array after the call.

03:26 .splice() also allows you to insert things at a splice point, and you can delete zero items while doing it. Splice is my go-to anytime I need to do anything with arrays.

03:36 Simply avoid using the delete keyword altogether. Okay, back to the fruit for a moment, let’s do some sorting.

03:49 Nothing surprising here. How about some numbers?

03:56 As I mentioned before, by default, sorting only works on strings. Each of these numbers is typecast to a string and sorted based on that. Values starting with 1 come before values starting with 2, et cetera.

04:10 If you want actual numeric shorting, you have to pass a comparison function to the .sort() call.

04:22 The comparison function is called with two items to be compared. If the first item is bigger than the second, return a positive value. If they’re the same, return 0. And if it is smaller, return a negative value. For numbers, subtracting one from the other will achieve this result. Finally, here’s that in keyword that gets me all the time.

04:50 This is the correct usage in JavaScript, which is the same as Python. This returns True because name is a key in the object.

05:03 And of course it returns False if the key isn’t in the object. Now using it with an array.

05:12 Doing it again. The items in the array aren’t keys, they’re attributes. 1 in is returning True because there is an item at index 1.

05:24 3 in is returning False because there isn’t anything at index 3. What makes this particularly painful for me is I often open a console and type a bit in to jog my memory of what works and what doesn’t in JavaScript.

05:38 If I choose the wrong example to test, it looks like in does what I want to, and then I’m bug hunting. Hopefully, by writing this lesson and explaining it to you, I’ll finally remember to stop making this mistake.

05:52 Time to take a break. Go stretch and caffeinate. Next up, even more quirks.