Comma operator in JavaScript: syntax error expected, but code runs OK - Stack Overflow

admin管理员组

文章数量:1410737

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 ma (",") instead of a semicolon (";"). Why did that not show up as a syntax error ?

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 ma (",") instead of a semicolon (";"). Why did that not show up as a syntax error ?

• javascript
• syntax
• ma-operator

Share Improve this question Follow edited Jun 10, 2022 at 17:57 miken32 42.8k1616 gold badges125125 silver badges174174 bronze badges asked Aug 3, 2012 at 11:30 arkaschaarkascha 43.1k88 gold badges6161 silver badges9696 bronze badges 1

• possible duplicate of Javascript syntax: what ma means? – Felix Kling Commented Aug 3, 2012 at 11:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Basically, the ma 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 ma operator and parentheses:

expression_value = (1,
2,
3)

It will have the value 3, because the ma 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 (i.e. the entire expression) would now have a value of 3.

The ma 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.

This syntax is using the ma 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

本文标签： Comma operator in JavaScript syntax error expectedbut code runs OKStack Overflow