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

• 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 2

Nine common javascript gotchas:
http://www.fitzblog.com/bid/2127/Nine-Javascript-Gotchas

Answer 3

• 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 JS well enough to know how to fix framework issues.
• Not knowing that JS 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 JS, 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 app you're writing.

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

Answer 4

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 5

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 of or even monkey patched, that means never rely on client side validation. NEVER.

Answer 6

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", 
};

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

• 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 9

+ to concatenate strings:

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

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

Answer 10

Some extreme ones: http://wtfjs.com/

Answer 11

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 12

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