JavaScript 中的逗号运算符：预期语法错误，但代码运行正常

Question

I just fixed a few bugs in a trivial web app of mine and stumbled over some interesting lines. I do not recall why I implemented those lines the way the were. Now I changed them to "normal" syntax and all is fine. My question just out of curiosity: why did the method work at all ? I'd expect a syntax error, but that was not the case. The code did work.

This is the old method implementation:

ListFillFilter: function(list){
    if (OC.Shorty.Debug) OC.Shorty.Debug.log("using 'default' method to filter filled list");
    // only makes sense for default OC.Shorty list
    var data=new Array();
    data['sum_shortys']=$('#desktop #list-of-shortys tbody tr').length;
    data['sum_clicks']=0;
    $('#desktop #list-of-shortys tbody tr').each(function(){
        data['sum_clicks']+=parseInt($(this).attr('data-clicks'),10);
    });
    OC.Shorty.WUI.Sums.fill.apply(OC.Shorty.Runtime.Context.ListOfShortys,[data]),
    // filter list
    OC.Shorty.WUI.List.filter.apply(this,[list,'target',list.find('thead tr#toolbar th#target #filter').val()]),
    OC.Shorty.WUI.List.filter.apply(this,[list,'title', list.find('thead tr#toolbar th#title #filter').val()]),
    OC.Shorty.WUI.List.filter.apply(this,[list,'status',list.find('thead tr#toolbar th#status select :selected').val()])
    // sort list
    $.when(
        OC.Shorty.Action.Preference.get('list-sort-code')
    ).done(function(pref){
        OC.Shorty.WUI.List.sort(list,pref['list-sort-code']);
    })
}, // OC.Shorty.Runtime.Context.ListOfShortys.ListAddInsert

In the middle you see 5 lines all starting with "OC.Shorty.WUI.Sums.fill.apply". These lines are terminated with a comma (",") instead of a semicolon (";"). Why did that not show up as a syntax error ?

Answer 1

Basically, the comma operator groups multiple expressions together, they represent the value of the last expression. In your case, you can just as well omit it.

Imagine you have this code:

1
2
3

That is perfectly valid JavaScript code. The numbers are just there to indicate three arbitrary expressions.

If you were to do the following:

var expression_value = 1
2
3

expression_value will have the value 1 .

If you use the comma operator and parentheses:

expression_value = (1,
2,
3)

It will have the value 3 , because the comma operator returns the value from the rightmost expression.

If you don't use any parenthesis, the following parentheses will be implied :

implied = ((expression_value = 1),
2,
3)

expression_value will then have a value of 1 , but implied (ie the entire expression) would now have a value of 3.

Answer 2

This syntax is using the comma operator, , . It evaluate all of its operands and returns the value of the last one.

The reason one would use this style of coding is so that they can execute the code quickly or on one line. Here is an example:

var a = 0,
    b = 1,
    c;

c = ( a++, b++, a + 2 ); // a is incremented, b is incremented, then c is assigned a + 2

a; // 1
b; // 2
c; // 3

Answer 3

The comma operator marks a sequence; JS inserts additional ';'s at ends-of-line only if this is necessary to make code parseable. Therefore, code like

alert("hi"),
alert("there"),
alert("bob") // no semi-colon here

is perfectly valid - it is understood as

alert("hi"),
alert("there"),
alert("bob"); // notice the semi-colon

instead of the (illegal)

alert("hi"),;
alert("there"),;
alert("bob");

Relying on auto-insert-of-semicolons is considered bad style , though.