What are the top JavaScript pitfalls?

Question

I'm planing on giving an introduction talk on JavaScript and in the preparation process I wondered what the top pitfalls are that rookies fall into.

I know I've had a few gotchas before I fully understood closure, but much of the strange behavior in JavaScript is not something I think about any more...

So, which pitfalls should you definitely point out to the rookies?

Answer 1

Boolean type conversion.

''        ==   '0'           //false
0         ==   ''            //true
0         ==   '0'           //true
false     ==   'false'       //false
false     ==   '0'           //true
false     ==   undefined     //false
false     ==   null          //false
null      ==   undefined     //true
" \t\r\n" ==   0             //true

As well as the difference between null and undefined. As listed in the table above, comparing null & undefined with == returns true, but with === it returns false. This behavior makes sense once you understand that undefined is very different from a variable having a null value, and something holding the value undefined is different from something being undefined.

Answer 2

Don't accidentally leave a trailing comma in an object definition literal or IE will fail and you won't notice until much later because you never use IE for development and by then it could suck figuring out what happened.

var foo = { 
    bar: "bar", 
    baz: "baz", 
};

Note @JulianR's comment: In arrays, IE doesn't fail directly by throwing some syntax error, but will fail when you try to use the array because the added comma makes IE think there's one more element in the array, with value undefined, than there actually is. So if you ever have an error because for some reason the last element in an array is undefined: it's a comma.

Answer 3

Admittedly I've been guilty of some of these in the past, for your amusement it's the ones in bold:

• Not knowing incorrect (and the very few correct) uses of eval

  eval("obj."+prop);

• Using with statements
• Using parseInt(str, base) without specifying the base argument.
• Using this in timer/callback functions.
• Using eval-like expressions in timers

  setTimeout("someFunc(myScopedVarWhoops)");

• Thinking jQuery is the name of the language you're coding
• Performing simple JavaScript tasks using a framework -- $(1).plus(1) anyone? ;-)
• Using continue without incrementing or adjusting the conditional variable.
• Flooding the global namespace with variables
• Forgetting var in or before for statements. for (i=0;i<10;i++)
• Using an obfuscator and just letting it run wild on your code
• Not really a pitfall, but pointless - return condition ? true : false; instead of return condition;
• Not commenting your code, applies to all languages really.
• Using try...catch...finally statements to catch errors instead of using if statements to check variables.
• Foolishly attempting to stop "view source" by blocking right mouse clicks on your pages (I was young *sobs*!)
• Using { 0: "Foo", 1:"Bar", 2:"Foobar" } instead of [ "Foo", "Bar", "Foobar" ]
• Using parseInt() on user input

  parseInt("1,000") // -> 1, wrong!
  +"1,000" // -> NaN, correct!

Some already mentioned:

• Not using strict equality (===) operators whenever possible
• Setting event handlers to the return value of a function instead of a reference to said function
• Not ; terminating statements properly
• Using for...in loops on arrays

Might think of some more after I've slept :-)

Answer 4

• Forgetting to declare variables with var
• Misunderstanding (or not understanding) variable scope and closures
• Trying to solve nasty compatibility problems that framework teams have already solved

Answer 5

+ to concatenate strings:

var a = '2';
var b = 3;

a * b #  6
a - b # -1
a + b #  23

Answer 6

JavaScript strings are not byte strings, nor are they even Unicode strings. They are UTF-16 strings. Most characters, including international ones, are a single element in a JavaScript string. But some characters (including most emojis) fall outside the Basic Multilingual Plane and thus appear as two elements in a JavaScript string.

Example:

> "♫".length
1
> "".length
2
> "".charAt(0)
"\uD800"
> "".charAt(1)
"\uDF08"
> "" === "\uD800\uDF08"
true

Answer 7

The biggest difficulties I see for the beginner are understanding execution context (i.e., what "this" means whenever and wherever it is encountered) and the prototype system of inheritance.

Answer 8

• Closures - otherwise known as lambda functions - watch out for memory leaks.
• Browser differences, testing in both Internet Explorer and at least one other browser is a must. Functions that only work in some browsers, or work differently in different browsers should generally be avoided. If this is not possible browser specific branching is better done detecting browser features instead of browser versions. This increases the chance of the code working in future browsers and browsers that have not been tested.
• Getting too caught up in jQuery or Ajax framework abstraction, and not knowing the underlining JavaScript well enough to know how to fix framework issues.
• Not knowing that JavaScript can be used to some degree to write OOP code. In fact it can give you a very basic OOP framework with objects.
• Case sensitivity (if you're a VB.NET developer)
• IP protection - knowing that you can obfuscate JavaScript, but the source code you put out there will be very easy to steal and reverse engineer. This might not even be an issue depending on the complexity of the client-side application you're writing.

I can't think of any more, but I hope this helps.

Answer 9

• Using window.onload = init(); instead of window.onload = init;
• Boolean equivalences (as mentioned already)
• Closures within a loop.
• Using for in loop variant for iterating over Arrays.
• Not using ; because it's "optional".
• this (just... in general :))
• Not using var
• Knowing that obj.ref === obj["ref"]

Answer 10

• Creating sites that don't work without JavaScript
• Using JavaScript for things that should be done server-side
• Using frameworks for simple tasks that don't require them

Answer 11

Not a real coding pitfall, but more one of general thought:
Don't trust the things your JavaScript is doing, it might have been turned off or even monkey patched. That means never rely on client-side validation. NEVER.

Answer 12

The whole concept of prototyping takes some time to fully understand but here are some common pitfalls:

Forgetting to reset the constructor property after assigning a prototype object:

var Foo() = function ()
{
    this.batz = '...';
};
Foo.prototype = new Bar();
Foo.prototype.constructor = Foo;

If you forget the least line, new Foo() will actually execute Bar().

Another pitfall with prototyping is iterating over objects/arrays without filtering out the members of the prototype:

for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
        //stuff...
    }
}

The extra condition will skip any members that are inherited from the prototype of obj.

Answer 13

typeof null is object


>>> var i = 1 + undefined; i;
NaN
>>> var i = 1 + null; i;
1