Javascript Incompatibilities/Inconsistencies

Question

I'm looking to do a presentation in a couple of weeks and was wondering: What are the top ten Javascript incompatibilities that you look out for when developing? What trips you up? I can start with one:

var somevar = {
 'internet': 'explorer',
 'hates': 'trailing',
 'commas': 'in',
 'json': 'code', // oh noes!
}

What are some other common gotchas that can't or aren't fixed by using a framework like jQuery or base?

Answer 1

$('asdf')
    .a()
    .b()        // Woops!  Forgot a semicolon.

$('qwer').d();

Answer 2

With HTML markup like

<div id="foo">
    <a href="#">Link 1</a>
</div>

If you obtain a reference to the outer div, it will have one child node in some browsers, and three child nodes in others, depending on how whitespace is treated. Some will have text nodes with the newline and whitespace as children of div#foo before and after the link element.

Answer 3

There are almost no inconsistencies in JavaScript implementations across browsers. If there were, it would be a nightmare multiplied (by the multiple inconsistencies in DOM implementation). So "Top Ten Javascript Incompatibilities/Inconsistencies" can probably only be populated with "Bottom One" you spotted. Indeed there could be a pair more, but I would hardly expect them to be major or even worth attention.

Answer 4

DOM API inconsitencies aside (which is what libraries solve), there aren't many.

But some JS engines have implemented more features, like [].map(), [].filter() etc, let statement or E4X. When I switch between Mozilla-targeted development (Firefox extensions, server-side with Jaxer) and general browser tageted development (websites) I need to remember what's available in every browser, and what isn't. So it's all about what is implemented, not how it is done.

Answer 5

Well, there's a problem with implied semicolons.

return {
    a: 1,
    b: 2
}

Some people like opening brackets on its own line, like this:

return
{
    a: 1,
    b: 2
}

However, this last statement will return undefined, since the parser sees:

return;
{
    a: 1,
    b: 2
}

Answer 6

var x = new Boolean(false); if (x) ... else...;

Is the 'if' or 'else' branch taken?

var x = "hi", y = new String("hi");

what is the typeof(x) and typeof(y) ?

Edit:..

parseInt("017") produces 15 (octal) instead of 17

The 'Error' object is a different signature from IE to Firefox.

When using objects as hashmap's, you need to use object.hasOwnProperty(key) to ensure that the property is not inherited through the prototype chain.

Answer 7

Another one (don't think this comes up very often):

(typeof document.getElementById)

in IE: "object"

in Firefox: "function"

Answer 8

Yet another one:

Regular expressions from Firefox to IE, there are lots of inconsistencies:

For the description: http://blog.stevenlevithan.com/archives/cross-browser-split

He publishes a fixed version of the RegEx object, and a testing page: http://stevenlevithan.com/demo/split.cfm

Answer 9

For the Date object:

alert( (new Date()).getYear();

Firefox returns 109

Internet Explorer returns 2009

Answer 10

alert(document instanceof Document)

in Firefox: true!

in Internet Explorer: exception: Document is undefined

Answer 11

An extension to altCognito's point.. Element isn't a defined base type either...

//uses jQuery
function getSomething(input) {
   if (typeof(input) == string)
       input = $(input)[0] || $('#'+input)[0] || null;

   if (input instanceof Element)
       input = $(input);

   if (input instanceOf jQuery) {
       ...do something...
   }
}

I had to replace the instanceOf Element with..

if (input && input.tagName)...

Would be nice if DOM elements were properly base classed in IE all around.