Expected Identifier bug in Internet Explorer 8

While working on a client project, I ran into an error in Internet Explorer 8. That’s not the most helpful or descriptive error in the world, so I was a bit thrown for a loop. What’s more, a Google search didn’t turn up any clear answers.

The code in question involved a JavaScript object resembling the following snippet.

var products = [{
	'title':'Mary Had A Little Lamb',
	'class':'song',
	'price': 1.99
   },
   {
   	'title':'Twinkle Twinkle Little Star',
        'class':'song',
        'price':0.99
    }]

Further down in another function, the properties from the object were referenced somewhat like the example below.

Array.prototype.map.call( products, function(prod){
	var item = document.createElement('li'), frag = document.createDocumentFragment();
	item.className = prod.class;
	item.textContent = prod.title;
	frag.appendChild( item );
	document.getElementsByTagName('ul')[0].appendChild( frag );
});

Now expected identifier errors are pretty common. You’ve probably run into one before, and I bet one of the following things, outlined by Tobias Sjösten, caused it.

1. There’s a stray comma after the last item in an object.
2. A JavaScript reserved word has been used as an identifier (function or variable name).

The first cause doesn’t apply here. Neither of the objects in our array have trailing commas. We can rule that out. But what about the second cause?

JavaScript prohibits some words from being used as variable or function names. These include words like break, switch, and with that have special meaning in JavasScript. They also include a category of words known as Future Reserved Words, which do not yet have a special meaning in JavaScript, but could one day. These words include:

• class,
• enum,
• extends,
• super,
• const,
• export, and
• import.

JavaScript allows almost any unicode sequence to be an IdentifierName. An object’s property is an example of an identifier name. Variables and function names, on the other hand, are two examples of an Identifier. Identifiers are kind of defined by what they are not, that is they are an IdentifierName with a character sequence that doesn’t match the Unicode value of a reserved word. The ECMAScript 5.1 specification explains some of this. Also read Mathias Bynens’ Valid JavaScript variable names for a better understanding of this.

Here’s where things get a little weird: class, the property name we’re trying to access, is one of the future reserved words on our list. But in the context in which we’re using it, it’s actually an identifier name. In other words: this shouldn’t be a problem. It isn’t for most browsers, including Internet Explorer 9+.

For Internet Explorer 8 (and presumably earlier versions), however, it is. IE8 treats our class property as though it’s an identifier even though it’s not. I think it’s actually expecting a variable name to follow class. Because none does, the browser chucks a wobbly. That’s a bug, and not the way things should work.

The good news, however, is that this only happens when using dot syntax. That makes fixing it easy: use square bracket syntax instead. Changing item.className = prod.class; to item.className = prod['class']; allows us to work around this bug, and doesn’t break things in other browsers. (The other solution, of course, is to change the property name.)