108

If I use:

1.09 * 1; // returns "1.09"

But if I use:

1,09 * 1; // returns "9"

I know that 1,09 isn't a number.

What does the comma do in the last piece of code?

More Examples

if (0,9) alert("ok"); // alert
if (9,0) alert("ok"); // don't alert

alert(1); alert(2); alert(3); // 3 alerts
alert(1), alert(2), alert(3); // 3 alerts too

alert("2",
    foo = function (param) {
        alert(param)
    },
    foo('1')
)
foo('3'); // alerts 1, 2 and 3
5
  • 3
    I'm surprised that 09 isn't failing for illegal '9' in octal literal. Commented Aug 24, 2010 at 21:11
  • 9
    @recursive - any 9 in octal representation results in a fallback to decimal. Commented Aug 24, 2010 at 21:14
  • Don't confuse the comma in an argument list. alert takes only one argument. Anything after that is discarded. Commented Aug 25, 2010 at 1:42
  • @Andrew: yes, is discarded by alert(), that takes only one argument, but it will be runned! That's weird. Thanks. Commented Aug 25, 2010 at 1:43
  • 1
    @Topera: not really weird if you think about it from JS's perspective. In JS you don't have to specify your argument list in your function declaration (you can use the arguments object instead, which can be of any length). Even with modern compiled JS, there would be no way to tell ahead of time how many arguments a function would take. Consider this: function test() { args=[]; for (var i = 0; i < arguments.length; i++) { args.push(arguments[i] + 1); } ; The interpreter would have to know how the function was being used to know how many args it would take. Instead, it evaluates everything. Commented Aug 25, 2010 at 2:05

5 Answers 5

110

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

Source: https://developer.mozilla.org/en/JavaScript/Reference/Operators/Special_Operators/Comma_Operator

For example, the expression 1,2,3,4,5 evaluates to 5. Obviously the comma operator is useful only for operations with side-effects.

console.log(1,2,3,4,5);
console.log((1,2,3,4,5));

Sign up to request clarification or add additional context in comments.

5 Comments

I can't think of many cases where the comma operator is used to any affect but saving characters (minifying) or obfuscating code.
@user17753 it can be used legitimately in the semicolon-separated section of a for loop.
@Cyoce: While that's true, speaking generally such logic is more clearly performed in the loop body. Some people will then claim that their way allows for multiple continue points without duplication, but then you shouldn't have multiple continue points.
@user17753 You're on the money; trying to understand a small snippet of minified code is why I'm here
Vue docs use it on their template compilation example
6

Some more to consider:

console.log((0, 9));
console.log((9, 0));
console.log(("foo", "bar"));

Comments

3

The specific syntax allows a bakery to functionally bake bread, hand it to the customer for consumption and also keep the number of returns to zero. All these by utilizing parenthesized arrow functions.

(new Array(3)).fill()
.map(()=>({state:"dough", bake(){this.state="baked"}, consume(){this.state="consumed"}}))

.map(bread=>(console.log(`Adding ${bread.state} to oven.`), bread.bake(), bread))
.map(bread=>(console.log(`Consuming ${bread.state} bread.`), bread.consume(), bread))
.map(bread=>console.log(`Bread is now ${bread.state}.`))
Adding dough to oven.
Adding dough to oven.
Adding dough to oven.
Consuming baked bread.
Consuming baked bread.
Consuming baked bread.
Bread is now consumed.
Bread is now consumed.
Bread is now consumed.

2 Comments

What difference if I use {}with ; inseed of () with , ?
@YuJiaao No need to explicitly use the keyword return.
0

Adding/modifying properties to an object and returning it in the same line is a possible use-case:

console.log(
  ((x) => (o = {biggerCond: r => r >= x},
           o.r5 = Array.from(window.crypto.getRandomValues(new Uint16Array(5))),
           o.isAnyBigger = o.r5.some(o.biggerCond),
           o.bigger = o.isAnyBigger ? o.r5.filter(o.biggerCond) : [x], o )
  )(5e4)
);
// Example
// {
//   bigger: [58414, 56500, 63397],
//   isAnyBigger: true,
//   isBiggerCond: r => r >= x,
//   r5: [58414, 12015, 56500, 63397, 43861]
// }

The above anonymous function returns an object with random values bigger than the input value or, if there's none, with the input value itself in an array in contained in the bigger property.

It is still syntactic sugar (like arrow functions), but it does shorten the number of lines... I wonder if some JS minifiers detect and adjust the code in a similar way automatically. Run it in your console:

((x)=>(o={biggerCond:r=>r>=x},o.r5=Array.from(window.crypto.getRandomValues(new Uint16Array(5))),o.isAnyBigger=o.r5.some(o.biggerCond),o.bigger=o.isAnyBigger?o.r5.filter(o.biggerCond):[x],o))(5e4)

3 Comments

But of course you wouldn't put such cryptic incantations into production code, right?
@LightnessRacesinOrbit well, I'll say it depends on the purpose (e.g. teaching, shortening code, no variable/function declarations, etc.). If you indent it as I did above, it is perfectly readable... Can't stop noticing that you used the word "cryptic" :)
Heh, that wasn't even deliberate 😂
-2

Have a look here - the comma stands for multiple expressions / statements. For example in your code you could use a line like this:

var a=0, b=0, c=0;

This would declare all three variables without writing:

var a=0;
var b=0;
var c=0;

Hope that helps.

1 Comment

It's a bit old, but important to note: (1) the example you have provided doesn't use the comma operator (var declarations don't use the comma operator, even though it's a comma) and (2) you can't separate statments using the comma operators; only expressions are allowed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.