Fixing Common JavaScript Bugs

Fixing Common JavaScript Bugs by Elijah Manor

This is a review of the penultimate course in the JavaScript Learning Path on Pluralsight.


This course examines common bugs exposing each problem and how to solve it, helping prevent you from making these mistakes gain a better understanding of how JavaScript works.

It is a gem of a course. I don’t think I would ever have watched it if I hadn’t been doing the learning path: the title is so boring and all the alliterative bug names are so obscure sounding.

Elijah Manor is a brilliant JavaScript teacher. It’s a shame that he doesn’t have more Pluralsight courses released, but I highly recommend both this course and jQuery-free JavaScript.

Statement Bugs

This begins with bugs caused by Automatic Semicolon Insertion (ASI), a feature which Brendan Eich now regrets adding

There is an interesting story about ASI from 2012. A religious war broke out on Github. You can read it all here:


281 comments later, marcooliviera writes:
“Just wanted to be part of web history. Haha… Hilarious”

Anyway here’s the jsfiddle link for the missing mark demo, and this does not compile due to the missing semicolon and the line break after the return keyword. Fix that and you’ll get another error, this time related to the array that the code is trying to forEach over.

I’m not personally a fan of getting cute with semicolons, but if you want to you can place a semicolon before the [ and get it working. If you use jshint you’ll want to turn the asi option on as well.

For more information on the ASI style of JavaScript coding see an open letter to JavaScript leaders. Again I’m not a big fan, but we’re all adults here right?

The next bug is Ecmascript 5 code. Only a problem if you still need to support old browsers like Internet Explorer 8. Elijah discusses Underscore and Lo-dash. He also explains how to implement the same functionality using “native” EcmaScript 3 code.

Next up is the tumble through bug, which is the problem of a missing break in a switch statement.

Tumble through fiddle

Linters such as JS Hint will highlight these problems for you.

Elijah also shows how to avoid using switch statements by using objects instead.

Object solution fiddle

In my opinion it is usually cleaner to use objects rather than switch statements.

Elijah also shows another switch free solution using functions
functions solution fiddle

Again better than the switch statement in my opinion.

The Strictly Stray bug is using strict mode in one file and then combining it with another file that wasn’t written to support strict mode.

The parsing parenthesis bug is where the developer writes an immediately invoked function without wrapping it inside round brackets (parentheses).

The evil eval bug demonstrates some of the problems eval can create. I never use eval. Before you even consider using it, make sure you fully understand it. Start with eval isn’t evil just misunderstood by Nicolas Zakas

evil eval fiddle

Fickle figure bug is about trailing commas, which were made legal in EcmaScript 5 but are a problem in Internet Explorer 8 and below. Remember that trailing commas are not supported in JSON.parse()

Expression and Operator Bugs

In crude computation bug, Elijah explains the problems with the IEEE 754 floating number format, which is the only supported number format in JavaScript.

In mistaken mold bug, Elijah explains the difficiencies of typeof and how to code around that.

If you use jQuery, read up on how to use type. Alternatively underscore and Lo-dash have useful type checking functions, such as isArray.

Twisted truth refers to the strange truthy and falsey rules. Definitely something to learn if you think JavaScript is like Java or C#.

The seven falsey values are:
undefined, null, false, +0, -0, NaN, “”

Everything else evaluates to true.

The crafty convert bug refers to the strange == rules. Again you must learn this and the difference between == and ===.

crafty convert fiddle

Problematic pause is about correctly understanding how the comma operator works.

The Ignored Invention bug is forgetting to use the new operator.

Ignored Invention fiddle

Function Bugs

Raised Resource Bug

This bug is due to a lack of understanding of variable hoisting. Variable declarations are hoisted up to the top of the function in which they are declared. Elijah shows how this can lead to strange results if you are using the same variable name both globally and within a function.

Early Execution Bug

Functions hoist differently depending on whether they are declared as Function statements, or function expressions. Both ways host the declaration, but only function statements hoist the assignment. Again this can lead to unexpected results, and it’s another reason to use a linting tool such as JS Hint: to get “was used before it was defined” warnings

Morphed Method Bug

This bug creates an Uncaught TypeError: undefined is not a function. It’s due to the misconception of JavaScript supporting method overloading – it doesn’t. Elijah explains how to make your functions smart enough to handle any inputs into them, and covers type checking.

Confounding Context Bug

This discusses problem of the this keyword changing context, and the many ways to work around it. “use strict” eliminates this coercion to the global object. There is the that-this technique The call method allows us to choose the context for the this implicit parameter The apply method works similarly, but you need to pass your other argument in an array. Alternatively use the bind method and specify what to bind it to.

Escaped Environment Bug

This bug is executing an event handler after a for loop has been completed, instead of at the right point within the for loop. In this clip, Elijah explains what a closure is, and gives a simple example: makeAdder

Peculiar Parameter Bug

This bug is due to an misunderstanding of the arguments object: although arguments has a length and each item can be accessed using the bracket notation (e.g. arguments[0]), arguments is NOT an array, and you can’t forEach over it.

A simple for loop solves the bug. Or if you want to get a bit more fancy, you can convert it to a real array using []

Condemned Criterion Bug

This bug is due to the use of strict mode, which bans the use of caller, callee and arguments properties. Instead of using these, you should name your functional expression and use that name instead of arguments.callee Value, Variable, and Literal Bugs

Booked Byword Bug

This bug is caused by tring to using a reserved word as a variable. Elijah shows a list of reserved keywords and a list of “Reserved Keyowrds for the Future”. Some of the latter category of keywords are now actual keywords in modern browsers, such as class, let and super. In ECMAScript 3 reserved words can not be used as identifier names (e.g. within an object definition) or identifiers (variables or function names) In ECMAScript 5 and ECMAScript 2015, reserved words can be used as identifier names, but not identifiers

Revealing Recall Bug

This bug is due to accidentally creating global variables: If you don’t declare your variables, JavaScript will for you on the global object. Your Linter will help you avoid this. Elijah explains two techniques for reducing the number of global objects: Object Literals and IIFEs. If you are using ECMAScript 2015+, you might want to use modules.

Relative Realism Bug

This is a bug that can be caused thanks to an awful omission from the EMCAScript 3 specification: undefined was missing from the reserved word list, which meant that some prankster could be assigned the value true and wreak havok on your code!!

Thankfully this was addressed in the EMCAScript 5 spec, which means if you are only supporting Internet Explorer 9 and up, this isn’t a bug that you need to worry about anymore.

Elijah decribes a technique used in jQuery for protecting against this and also aiding minification. I think this adds noise to your code, but it is good to have this explained: you may come across this technique used in legacy code and now you will understand the purpose of it.

Elijah uses Chrome as his standard browser so for demonstrating the bug he goes to to run the code on Internet Explorer 8.

Tangled Tag Bug

This is another bug isn’t a problem in ES5+ browsers. The error is “Object doesn’t support this property or method”
Named access on the Window object:

This example creates a global variable when it wasn’t necessary. Elijah gives three solutions: One solution is to use an IIFE wrapper, another is to use jQuery chaining to avoid the need to declare a new variable, and another is to use $(document).ready

Double Define Bug

This is defining the same key more than once within an object. Strict mode will expose this error for you, so you should use strict mode when you are defining large objects.

Transform Total Bug

This is another ES3 only bug, caused by missing the radix from the parsing function.

Transform Total Fiddle

Amount Aware Bug

This is about using the isNaN function rather than == or ===
This will return true for any non number, such as arrays or strings.

In ECMASCRIPT 2015 there is Number.isNaN which only returns true for NaN

Object Bugs

Pregnable Property Bug

This is the use of for-in loops combined with a library such as mootools.js or prototype.js which adds additional prototype methods to objects such as Array.

Elijah explains three solutions. Read up on hasOwnProperty, and if you don’t need to support ES3 browsers consider using forEach.

Pregnable Property Bug

Accidental Ancestory Bug

This is inheriting behaviour from another type accidentally due to an incomplete understanding of JavaScript’s prototypal inheritance.

Accidental Ancestory Fiddle

Elijah explains that you should use Object.Create to fix this. He then refactors the code into something much cleaner.

Eccentric Envelope Bug

Another illustration of how JavaScript can sometimes be downright freaky. Type conversion hacks explained here include

!!”false” for converting to a boolean

and 42..toString() for converting a number to a string

Eccentric Envelope Fiddle

Translate Time Bug

This is about problems converting the old .NET serialized date time into JavaScript date times. Moment.JS solves this problem for you.

Perpetual Property Bug

In sloppy mode, there is no error when you try to update a read-only property. This is another good reason to use strict mode.

Strange Set bug

This bug is using the array constructor with one number expecting it to create an array with just that number.


This actually creates an array of undefined values!

To fix just use an array literal e.g. [6]

Malformed Message Bug

Bug caused by incomplete understanding of JSON. Never use single quotes in JSON strings.

Malformed Message Fiddle

Recommended speeds:

Experienced amateurs – 1.0x
Pros – 1.3x

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s