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.
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.
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.
Linters such as JS Hint will highlight these problems for you.
Elijah also shows how to avoid using switch statements by using objects instead.
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
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 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.
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 ===.
Problematic pause is about correctly understanding how the comma operator works.
The Ignored Invention bug is forgetting to use the new operator.
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. http://jsfiddle.net/MgRNL/
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
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. http://jsfiddle.net/WQHNU/
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 http://jsfiddle.net/cq8Vh/
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), 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 .slice.call(arguments)
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 http://jsfiddle.net/LKVsT/
Revealing Recall Bug
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 https://www.browserstack.com/ 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: https://html.spec.whatwg.org/multipage/browsers.html#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.
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
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.
Accidental Ancestory Bug
Elijah explains that you should use Object.Create to fix this. He then refactors the code into something much cleaner.
Eccentric Envelope Bug
!!”false” for converting to a boolean
and 42..toString() for converting a number to a string
Translate Time Bug
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. 
Malformed Message Bug
Bug caused by incomplete understanding of JSON. Never use single quotes in JSON strings.
Experienced amateurs – 1.0x
Pros – 1.3x