Utilizing the comma operator enables you to incorporate multiple expressions in a location that typically only expects one expression. The result will be the value of the final comma-separated expression.

I personally do not frequently utilize this feature because there are limited scenarios where more than one expression is needed, and often there is a clearer alternative to using the comma operator. One interesting use case is within a for loop when you need to increment multiple variables:

// Assume j is already initialized with a value
// During the execution of the for loop, both i and j will be incremented
// Thanks to the comma operator allowing two statements in place of one
for (var i = 0; i < items.len; i++, j++) {
    // Insert loop code here that interacts with items[i] 
    // and occasionally utilizes j to access a different array
}

As demonstrated in this example, i++, j++ can be used where a single expression is expected. In this specific scenario, the multiple expressions are primarily for side effects, so it is not crucial that the compound expression only takes on the value of the final one. However, there are instances where this distinction may be significant.

When developing functional code in JavaScript, the Comma Operator proves to be an invaluable tool.

Take for example a piece of code I implemented for a Single Page Application in the past:

const actions = _.chain(options)
                 .pairs() // 1
                 .filter(selectActions) // 2
                 .map(createActionPromise) // 3
                 .reduce((state, pair) => (state[pair[0]] = pair[1], state), {}) // 4
                 .value();

This scenario was quite intricate, but let me walk you through it and demonstrate the significance of the Comma Operator in this context.

1. The pairs function breaks down the options passed to the function into an array of key-value pairs

2. It then filters out the actions based on certain criteria determined in the system

3. Using the map function, each value in the array is replaced with a promise representing that action

4. Finally, the reduce function merges all the property arrays back into a single object

The outcome is a modified version of the original options object, containing only the necessary keys and values for the calling function.

Focusing on the line

.reduce((state, pair) => (state[pair[0]] = pair[1], state), {})

You can observe that the reduce function initializes an empty state object and iteratively adds properties for each key-value pair. Thanks to ECMAScript 2015's arrow function syntax and the Comma Operator, a concise and effective "iteratee" function is achieved.

While I have encountered multiple instances where the Comma Operator proved beneficial in my JavaScript development, particularly when adopting a more functional approach with ECMAScript 2015 + Arrow Functions, I must admit that I had not consciously utilized it before the introduction of arrow functions.

One interesting use of the comma operator is to conceal results that are not needed in the repl or console, simply for the sake of convenience.

For instance, when you run myVariable = aWholeLotOfText in the repl or console, it will display all the data you just assigned. This could be a long list of information, and if you don't want to see it, you can instead run

myVariable = aWholeLotOfText, 'done'

Oriel makes a valid point^† that customized toString() or get() functions could enhance this functionality even further.

The comma operator is not limited to JavaScript; it is also found in languages such as C and C++. Acting as a binary operator, it proves to be useful when the first operand, usually an expression, produces a desired side effect needed by the second operand. An example from Wikipedia illustrates this concept:

i = a += 2, a + b;

Although you could achieve the same result with two separate lines of code, utilizing the comma operator provides an alternative that can sometimes be more readable.

In contrast to Flanagan's view, I believe that the comma is an incredibly valuable tool that enhances the readability and elegance of code, particularly for those with experience:

For a comprehensive examination of comma usage, check out this detailed article:

Here are some examples to illustrate its effectiveness:

function renderGraph() {
  for(var x = 1, y = 10; x*y; x++, y--) {
    console.log(new Array(x*y).join('*'));
  }
}

An example of a Fibonacci sequence generator:

for (
    var i=2, sequence=[0,1];
    i<15;
    sequence.push(sequence[i-1] + sequence[i-2]), i++
); 
// 0,1,1,2,3,5,8,13,21,34,55,89,144,233,377

Creating a function to find the first parent element, similar to jQuery's .parent() function:

function findAncestor(element, tag) {
    while(element = element.parentNode, element && (element.tagName != tag.toUpperCase()));
    return element;
}

//element in http://ecma262-5.com/ELS5_HTML.htm
var element = $('Section_15.1.1.2'); 

findAncestor(element, 'div'); //<div class="page">

The comma operator has proven to be extremely valuable when creating helper functions like this.

const stopPropagation = event => (event.stopPropagation(), event);
const preventDefault = event => (event.preventDefault(), event);
const both = compose(stopPropagation, preventDefault);

While you could use || or && instead of the comma, it would require knowledge of what the function returns.

Furthermore, the comma separator indicates intent -- the code doesn't rely on the left-operand's evaluation, unlike the alternatives which may have other purposes. This clarity makes the code easier to comprehend and update. Any changes to the function return type would not impact the code above.

Although there are alternative methods to achieve the same outcome, none are as concise as the comma operator. If || and && have become popular in common usage, there is certainly a place for the comma operator as well.

While I have not discovered any practical applications for it, here is a scenario where James Padolsey effectively utilizes this method for detecting IE in a while loop:

var ie = (function(){

    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while ( // <-- notice no while body here
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );

    return v > 4 ? v : undef;

}());

These specific lines need to be executed:

div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]

Even inside the comma operator, both are evaluated, although they could have been made into separate statements somehow.

Here's an interesting trick you can do in JavaScript to call a function indirectly using the comma operator.

If you want to learn more about this technique, check out the detailed explanation at: Indirect function call in JavaScript

Let's take a look at how this syntax is used:

(function() {
    "use strict";
  
    var global = (function () { return this || (1,eval)("this"); })();
    console.log('Global === window should be true: ', global === window);
  
    var not_global = (function () { return this })();
    console.log('not_global === window should be false: ', not_global === window);
  
  }());

By leveraging the power of the comma operator, you can access the global variable in a unique way, thanks to the differences in how eval behaves when called indirectly.

One scenario where I frequently utilize this approach is when dealing with optional argument parsing. I find that it enhances both the readability and conciseness of the code, ensuring that argument parsing does not overshadow the overall function logic.

/**
 * @param {string} [str]
 * @param {object} [obj]
 * @param {Date} [date]
 */
function processArguments(str, obj, date) {
  // handle optional arguments
  if (typeof str !== "string") date = obj, obj = str, str = "default";
  if (obj instanceof Date) date = obj, obj = {};
  if (!(date instanceof Date)) date = new Date();

  // ...
}

Consider having an array:

myArray = [];

Usually, when we add elements to this array using the push method, we care more about the resulting array itself rather than the length of the array:

myArray.push('apple')  // ['apple'] is more important than 1

By utilizing the comma operator, we can add elements to the array, target the array as the final operand of the comma, and then utilize the array -- the result -- for another array method call, creating a chain of actions:

(myArray.push('banana'), myArray.push('cherry'), myArray).sort(); // [ 'banana', 'cherry', 'apple' ]

Today, while reviewing proposals for pipeline operator proposal and partial application, I stumbled upon this interesting concept.

• (https://github.com/tc39/proposal-pipeline-operator
• (https://github.com/tc39/proposal-partial-application#hack-style-pipelines)

It's worth noting that Hack-style pipelines can be implemented today without the need for new syntax:

let $; // Hack-style topic variable
let result = (
  $= books,
  $= filter($, _ => _.title = "..."),
  $= map($, _ => _.author),
  $);

By using comma expressions, we can mimic the behavior of a pipeline operator that is not yet supported by the language.

Removing the space between $= creates a similar effect to a proper pipe token like |>. Keep in mind that the "topic" variable $ is just a placeholder for reassignment. It can be any variable.

// Encapsulated in an IIFE
let result = (() => {
  let $;
  $ = books;
  $ = filter($, _ => _.title = "..."),
  $ = map($, _ => _.author),
  return $;
})()

The "comma" approach helps in simplifying the code and brings it closer to what the proposed pipeline operator would look like:

let result = books
  |> filter($, _ => _.title = "..."
  |> map($, _ => _.author)

Here's a practical example of using this technique to compose functions:

const double = (x) => 2 * x;
const add = (x, y) => x + y;
const boundScore = (min, max, score) => Math.max(min, Math.min(max, score));


const calculateScore = ($) => (
  $= double($),
  $= add($, 20),
  $= boundScore(0, 100, $),
  (console.log($), $)
)

const score = calculateScore(28)

One advantage of this approach is that it eliminates the need to use the return statement within nested conditionals, making it especially useful when working with the ternary operator. Here's an example:

function insert(v){
  return this.node > v ? this.left.size < this.right.size ? ( this.left.insert(v)
                                                            , this
                                                            )
                                                          : ( this.left.insert(this.node)
                                                            , this.node = this.right.popmin()
                                                            , this.insert(v)
                                                            , this
                                                            )
                       : this.left.size < this.right.size ? ( this.right.insert(this.node)
                                                            , this.node = this.left.popmax()
                                                            , this.insert(v)
                                                            , this
                                                            )
                                                          : ( this.right.insert(v)
                                                            , this
                                                            )
}

The comma operator, when used in JavaScript, evaluates each of its operands from left to right and finally returns the value of the last operand. This feature allows you to combine multiple expressions into one, with the ultimate result being the value of the rightmost expression. It is frequently employed to pass several parameters to a for loop.

Assume x is initialized as 1;

x is then reassigned as (x++, x);

Upon printing x to the console, the expected output would be 2

x is further modified to be (2, 3);

On printing x again, the expected output would now be 3

Comma Operator - MDN Web Docs