108

Why does aaa = 1,2,3 work and set the value of aaa to 1?

aaa = 1,2,3;
console.log(aaa);

Why doesn't var bbb = 1,2,3 work?

var bbb = 1,2,3;
console.log(bbb);

Why does var bbb = (1,2,3) work and set the value of bbb to 3?

var bbb = (1,2,3);
console.log(bbb);

1
  • 9
    You get the syntax error because variable names are not allowed to start with a number. var a1,a2,a3; will simply declare three local variables. Commented Mar 31, 2014 at 22:35

4 Answers 4

200

There's a lot going on here, but basically, it comes down to the comma operator.

The comma operator evaluates both of its operands (from left to right) and returns the value of the second operand.


This code:

aaa = 1,2,3

Is equivalent to:

aaa = 1;
2;
3;

So aaa is implicitly declared and assigned a value of 1. Notice that the output on the console is the result of the last statement, 3.


This code:

var bbb = 1,2,3

Is a syntax error because commas in variable declarations are used to declare multiple variables in a single line. As the MDN article points out,

Note that the comma in the var statement is not the comma operator, because it doesn't exist within an expression. Rather, it is a special character in var statements to combine multiple of them into one.

So this code is roughly equivalent to:

var bbb = 1;
var 2;
var 3;

Of course, 2 is not a valid identifier, so it fails at that point.


This code:

var bbb = (1,2,3)

Is very similar to the first, except because the numeric values are wrapped in a parentheses, they are evaluated first. So this is rougly equivalent to:

1;
2;
var bbb = 3;
4
  • 17
    Even more, the = in var bbb = 1; is not the same the = as in aaa = 1; - they come from different productions (Initialiser vs AssignmentExpression) in the grammar and just happen to use the same token. Commented Apr 1, 2014 at 2:53
  • 7
    Very nice explanation. What was not entirely explicit was that a = 1, 2, 3 can be parenthesized as (a = 1), 2, 3 which evaluates as a = 1; 2; 3 (and returns 3, e.g. b = (a = 1, 2, 3) would assign 3 to b). In contrast, a = (1, 2, 3) evaluates as 1; 2; a = 3 and returns 3.
    – CompuChip
    Commented Apr 1, 2014 at 19:05
  • What does the MDN say about parens in variable assignment and why is it in reverse? I couldn't find the doc Commented Apr 2, 2014 at 13:27
  • @staticx Nothing is really done 'in reverse'. The parentheses are evaluated first. Just like when you have (1 + 2) * 3, the 1 + 2 is evaluated first and the result of that expression is substituted back into the outer expression for the rest of the evaluation.
    – p.s.w.g
    Commented Apr 2, 2014 at 15:44
9

Comma has multiple uses in Javascript. In the expression:

a = 1, 2, 3;

it's an operator that simply returns its right-hand argument. But it's also part of the syntax of var declarations, which are:

var var1 [ = val1 ], var2 [ = val2 ], var3 [ = val3 ], ...;

(where [...] means that part is optional). Your var declaration is missing the variable names after the commas, so it doesn't parse. You could get the effect you wanted with:

var a = (1, 2, 3);

The parentheses force the commas to be treated as operators rather than delimiters between variable declarations.

7

In your examples, the comma is used in two contexts:

var statement

The syntax of var statement is:

var varname1 [= value1 [, varname2 [, varname3 ... [, varnameN]]]];

Here, comma is used to separate variable name-value pairs. The following will not work because a variable name cannot start with a digit (see identifier names):

var bbb = 1, 2, 3;
// SyntaxError: Unexpected number

Comma Operator

The comma operator evaluates both of its operands (from left to right) and returns the value of the second operand. The following expressions work as follows:

aaa = 1, 2, 3;
  • aaa = 1, 2 yields 2
    • note that aaa = 1 is evaluated first because = has higher priority than ,
  • 2, 3 yields 3
var bbb = (1, 2, 3);
  • the expression (1, 2, 3) yields 3 as described above
  • The variable bbb is assigned the value 3
1
  • 2
    aaa = 1, 2, 3 => the comma operator is used to separate the following 3 statements: aaa=1, 2 and 3. The result of the comma operator is the value of the last statement 3. However, aaa is assigned the value of 1, as can clearly be seen from the OP's screenshot. The reason for this is the Operator Precedence, with the Comma Operator having the lowest precedence.
    – Tibos
    Commented Apr 1, 2014 at 8:59
1

In the first case:

aaa = 1,2,3

the commas serve as expression separators. It performs an assignment to aaa, then it calculates 2 and discards it, then it calculates 3 and discards it.

In the second:

var bbb = 1,2,3

The var keyword tells the Javascript compiler that the next thing after a , should be another variable name. It isn't finding on, so it dies and gags.

var bbb = (1,2,3)

Here, the compiler first evaluates 1 and ignores it. Then it evaluates 2 and ignores it. Then it evaluates 3 and that is left on the stack so it is assigned to bbb

While using commas to separate expressions isn't common, it is sometimes useful in things like for looks.

for (i = 0, l = 10; i < l; i++) {
  console.log(i);
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.