issue regarding trailing commas in JavaScript

Question

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?

Well, the trailing commas are... the trailing ones. ) They follow the last element of declared array/object. `color : jqTextareaDiv.css("color"),` is the one I found in your example, may be there are others. In fact, their location was given by error message; to fix them, just remove the commas in the erring string. — raina77ow, Aug 22 '12 at 15:22
Also looks like your regex, with it's unescaped quotation marks, may be causing a problem — Mike Robinson, Aug 22 '12 at 15:25
And the reason for them to be removed is given as well: trailing commas do not go well with IE8-. If you don't need to support these beasts, just set `language_in` option accordingly. — raina77ow, Aug 22 '12 at 15:25
@raina77ow That's true. I found and corrected that one, thanks. But I can't find the first one, that has to do with the line holding the .replace() call. — Andrei Oniga, Aug 22 '12 at 15:26
@MikeRobinson Well, quotation marks are quite regular inside regex literals... but that can be the reason for parser to fail somehow, agreed. ) — raina77ow, Aug 22 '12 at 15:26
@raina77ow They are, but it looks like the compiler is choking on that line. I guessed it might be interpreting the two as closing a string and causing the comma after /gi to choke out the object definition — Mike Robinson, Aug 22 '12 at 15:30
@AndreiOniga Try to play with quotation marks in that regex, they seem to confuse the Closure. — raina77ow, Aug 22 '12 at 15:31
Actually, it was the same problem in both cases, I just didn't realize it because of the comma within the replace() call. — Andrei Oniga, Aug 22 '12 at 15:32

score 32 · Accepted Answer · answered Aug 22 '12 at 15:24

32

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.

answered Aug 22 '12 at 15:24

lonesomeday

233,373
50
316
318

I found and corrected that one, but can't find the first one, that's (supposedly) on the same line with the .replace() method call – Andrei Oniga Aug 22 '12 at 15:28
@AndreiOniga Well, there's nothing wrong there. My guess is that the closure compiler is getting confused with the `"` in the regex - try escaping it `\"` to give the compiler a hand... – lonesomeday Aug 22 '12 at 15:29
Actually, it wasn't. I just didn't notice the one after "color : jqTextareaDiv.css("color")", just the second one. My bad. Thanks! – Andrei Oniga Aug 22 '12 at 15:30
2

If you don't need to support IE less than 9, you can also switch the compiler to ECMASCRIPT 5 mode, where the trailing commas behavior was standardized (this will effectively allow the compiler to strip the trailing comma). – John Aug 22 '12 at 21:08
2

The Closure compiler switch that John didn't mention :-) `--language_in ECMASCRIPT5` – Michaelangel007 Jan 28 '13 at 06:42

score 3 · Answer 2 · answered Aug 22 '12 at 15:24

3

This is the trailing comma:

color          : jqTextareaDiv.css("color"), <<--

answered Aug 22 '12 at 15:24

Aaron Digulla

321,842
108
597
820

score 2 · Answer 3 · answered Aug 22 '12 at 15:24

2

You have a trailing comma in color : jqTextareaDiv.css("color"),. That would be the first warning. The second warning is probably a similar definition somewhere else in your code.

answered Aug 22 '12 at 15:24

mamapitufo

4,680
2
25
19

issue regarding trailing commas in JavaScript

3 Answers3