JavaScript Jems - The Comma

Written by Mike James

Monday, 17 October 2022

Article Index
JavaScript Jems - The Comma
Using the Comma

Page 2 of 2

Using the Comma

So now we have the comma mastered - what can you use it for? The honest answer is not much. The comma is a jem but not a particularly useful one. There are places, especially in libraries, where you will find the comma operator in use, but in most cases there are much better and clearer ways of expressing the same idea. The most commonly encountered use of the comma operator is to make more complex for loops. Ideally for loops should be kept simple so making them more complex isn't something to encourage.

A JavaScript for loop has the form:

for(expression1;expression2;expression3)

The first expression is evaluated once when the loop starts and it is usually where the initialization occurs. The second expression is evaluated before each new iteration of the loop. If it evaluates to false the loop stops. The final expression is evaluated at the end of each loop iteration and it is generally where loop counters are updated.

Notice that you can write any expression you care to in a for loop and you can use the comma operator so that you can write multiple expressions. So, for example, what do you think the following is all about?

for(let i=0,j=10;i<=j;i++,j--){ 
 console.log(i*j); 
}

The first expression isn't a use of the comma operator. It just uses the var statement to create two local variables, i and j, and sets them to 0 and 10 respectively. The second expression is a simple test for i being less than or equal to j, and doesn't use the comma operator. The final expression is the only use of the comma operator and it adds one to i and subtracts one from j each time through the loop. So the values of i and j we create are:

and then the loop ends.

Clever? You could just as easily have written the loop as:

for(let i=0;i<=5;i++){
 console.log(i*(10-i));
}

You can use a similar technique to turn a while loop into a sort of for loop:

var i=0; 
while(i++,i<10){
 console.log(i)
}

There are lots of similar uses and examples, but they all come down to the same thing - we need to use a single expression, but also need to evaluate some other expressions first just for their side effects.

Relationship to Active Logic

The comma operator , can be thought of as being a member of the same family as &&, || and ? discussed in the previous jem.

To summarize:

expressionA || expressionB

evaluates expressionA - if truthy then expressionA is the result, otherwise the right-hand expression is evaluated and is the result.

expressionA && expressionB

evaluates expressionA - if falsey then expressionA is the result, otherwise the right-hand expression is evaluated and is the result.

expressionA ? expressionB:expressionC

evaluates expressionA - if truthy it evaluates expressionB as the result and otherwise it evaluates expressionC as the result.

The comma operator:

expressionA , expressionB

evaluates expressionA then the right-hand expression is evaluated and is the result.

It is also worth noting that the comma operator works well with any of the other active logic operators. In particular, the ternary operator ? can often make use of it. For example:

triesLeft ? (triesLeft--,try()):
                     (noMoreTries(),Finish());

If you assume that triesLeft is a counter of how many attempts the user still has, you can decrement it and call the try function or call noMoreTries to inform the user that they have failed and then stop the program.

In conclusion, the situation is best summed up as "you need to understand the comma, but you probably don't need to use it". What really matters is that you don't confuse the many other uses of the comma with the comma operator.