issue regarding trailing commas in JavaScript

Andrei Oniga picture Andrei Oniga · Aug 22, 2012 · Viewed 13.9k times · Source

Possible Duplicate:
Internet Explorer, Closure Compiler and Trailing Commas

I've tried compressing my javascript code using the Closure Compiler and the compilation of the code generated these two errors:

JSC_TRAILING_COMMA: Parse error. IE8 (and below) will parse trailing commas in array and object literals incorrectly. If you are targeting newer versions of JS, set the appropriate language_in option. at line 379 character 0 fontFamily : jqTextareaDiv.css("font-family").replace(/["']{1}/gi,""),

JSC_TRAILING_COMMA: Parse error. IE8 (and below) will parse trailing commas in array and object literals incorrectly. If you are targeting newer versions of JS, set the appropriate language_in option. at line 932 character 0 fontFamily : jqDiv.css("font-family"),

These two errros seem to refer to this code:

var jqTextareaDiv = obj.target.parent().parent(),
                            style = {       // the current, relevant style rules for the DIV nesting the textarea
                                fontFamily     : jqTextareaDiv.css("font-family").replace(/["']{1}/gi,""),
                                fontSize       : jqTextareaDiv.css("font-size"),
                                fontStyle      : jqTextareaDiv.css("font-style"),
                                fontWeight     : jqTextareaDiv.css("font-weight"),
                                textDecoration : jqTextareaDiv.css("text-decoration"),
                                textAlign      : jqTextareaDiv.css("text-align"),
                                color          : jqTextareaDiv.css("color"),
                            },
                            jqToolbox = $('#text-edit-toolbox'),
                            jqIndicators = {
                                fontFamily                : $('#font-family-indicator'),
                                fontSize                  : $('#font-size-indicator'),
                                fontStyle                 : $('#font-format-indicators .font-style'),
                                fontWeight                : $('#font-format-indicators .font-weight'),
                                textDecorationUnderline   : $('#font-format-indicators .underline'),
                                textDecorationLineThrough : $('#font-format-indicators .line-through'),
                                textAlignLeft             : $('#text-alignment-indicators .align-left'),
                                textAlignCenter           : $('#text-alignment-indicators .align-center'),
                                textAlignRight            : $('#text-alignment-indicators .align-right'),
                                textAlignJustify          : $('#text-alignment-indicators .align-justify')
                            };

Exactly which is the trailing comma in this case and how can I remove it without breaking the code?

Answer

lonesomeday picture lonesomeday · Aug 22, 2012

A trailing comma is a comma that follows the final element in an array or object literal. So like this:

['a', 'b', 'c',] // with trailing comma
['a', 'b', 'c']  // without trailing comma

In this case, the trailing comma follows the last element in your object literal:

color          : jqTextareaDiv.css("color"),

If you remove it, the expected behaviour will occur. With it there, IE<9 won't like it.