Comma Operator in JavaScript

One of lesser known features of JavaScript

Yadav, Niteesh
Feb 26 · 4 min read

The comma operator fits in with a set of expression operators and it can be useful, but it has a tendency to be used in ways that confuse rather than clarify. Part of the reason for this is that it is a comma, and commas have other meanings in JavaScript. So to be 100% clear, the comma is only a comma operator when it acts on two expressions:

lefthand expression , righthand expression

Where expression is something that involves other operators, variables and functions.

What it does?

It is used to execute two expressions sequentially. It evaluates each of its operands from left to right first and then value of the last operand will be returned as the result.

Important point to note here is, it is different from the comma within arrays, objects, and function arguments and parameters.

let num = 10;num = (num--, num);console.log(num);
// expected output: 9
num = (20, 30);console.log(num);
// expected output: 30

In above example, we have to use parenthesis, since comma operator has the lowest priority of all the JavaScript operators. Without parentheses, expression would be parsed as:

x = (20), 30;

Above statement ends up storing 20 in x and throwing away the result of the right-hand expression. Here question that naturally comes to mind is why bother using parenthesis to assign values? Just assign them directly.

The answer is that some operators as well as most of the functions have side effects. For example,

varr = (console.log(1),console.log(2),console.log(3),4);

and you will see 1, 2, 3 printed on the console and 4 stored in varr. In above example, in place of comma operator, we can also use the semicolon like below -

console.log(1); console.log(2); console.log(3); varr = 4;

However, the point here is that, semicolons separate statements where as commas separate expressions, and in some cases statements are also expressions.

Few Examples

var var1, var2, var3;var1 = var2 = 10, var3 = 20; // Returns  in console
console.log(var1); // 10 (left-most)
var1 = (var2 = 30, var3 = 40); // Returns 6 in console
console.log(var1); // 40 (right-most)

Computation of Property Keys : This example is tricky.

const map = {
[1 << 0]: "Batman",
[1 << 1]: "Superman",
[1 << 2]: "Flash"
// { '1': 'Batman', '2': 'Superman', '4': 'Flash' }

Use Cases

Some of the common use cases if comma operator are listed below-

  • declare multiple variables at once: var x = 0, y = 0, z = 0;

All of the above examples are syntactically correct and contain a comma, however none of them makes use of the actual comma operator. Some of the actual use cases that I can think of are -

  • Allows us to put multiple expressions in a place where one expression is expected. The resulting value of multiple expressions separate by a comma will be the value of the last comma separated expression.
// j is initialized to some other value
// as the for loop executes both i and j are incremented
// because the comma operator allows two statements to be put in place of one
for (var i = 0; i < items.length; i++, j++) {
// loop code here that operates on items[i]
// and sometimes uses j to access a different array

In above example, i++, j++ can be put in a place where one expression is allowed. In this particular case, the multiple expressions are used for side affects so it does not matter that the compound expressions takes on the value of the last one, but there can be other cases where that might actually matter.

Browser Compatibility

JavaScript in Plain English

Learn the web's most important programming language.

Yadav, Niteesh

Written by

Thinker || Writer || Avid Reader || Technical Enthusiast

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

More from JavaScript in Plain English

More from JavaScript in Plain English

6 Useful Node.js Internal Modules

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade