What does a comma do in JavaScript expressions?

In this tutorial, we will discuss what a comma does in JavaScript expressions.

The comma is an operator in JavaScript that returns the last operand while evaluating all operands in an expression. The evaluation is from the left to right direction.

In a compound expression, the value of the rightmost operand is the outcome of the expression.

We use commas in for loop to give multiple parameters. The comma operator is completely different from commas in arrays, objects, arguments of a function, and parameters.

Using Comma Operator in JavaScript Expressions

Syntax

var test = expr1, expr2

In the syntax, the variable test gets the value of expr2.

Example 1

In this example, the comma operator returns the rightmost operand value. In the final expression below, a pre-increment operation takes place. The function returns the value of the operand x while the expression evaluation happens in parallel

<html>
<head>
   <script type = "text/javascript">
      function evalExpr()
      {
         var commaBtn = document.getElementById("commaBtnWrap");
         var commaOut = document.getElementById("commaOut");
         var commaStr = "";
         let p = 2;
         p = (p++, p);//2 3, 2
         commaStr += "p=2 (p++,p) <b>returns p=" + p + "</b><br><br>";
         let a = (1, 4);
         commaStr += "a=(1,4) <b> returns a=" + a + " </b><br><br>";
         let x, b, c;
         x = b = 3, c = 4;
         commaStr += "x = b = 3, c = 4 <b>returns x=" + x + "</b></br><br>";
         let m, n, o;
         m = (n = 5, o = 6);
         commaStr += "m = (n = 5, o = 6) <b>returns m="+ m + "</b><br><br>";
         let g = 0;
         commaStr += "g=0 (g += 1, g) <b>returns " + (g += 1, g) + "</b>";
         commaOut.innerHTML = commaStr;
      }
   </script>
</head>
<body>
   <h2>Using Comma Operator in JavaScript Expressions<i></h2>
   <div id = "commaBtnWrap">
      <p>Click the button</p>
      <button onclick = "evalExpr()">Click Me</button>
   </div>
   <div id = "commaOut"></div>
</body>
</html>

Example 2

In the snippet below, one() starts execution and prints “function one” to the console. The next two() start the execution and print “function 2” to the console. Finally, three() start the execution and print “function 3”. Here the function returns 3 because it is the rightmost operand in the expression.

<html>
<head>
   <script type = "text/javascript">
      function evalExprFn()
      {
         var commaFnBtn = document.getElementById("commaFnBtnWrap");
         var commaFnOut = document.getElementById("commaFnOut");
         var commaFnStr = "";
         
         // commaFnBtn.style.display = "none";
         function one()
         {
            commaFnStr += "function one<br>";
            return 1;
         }
         function two()
         {
            commaFnStr += "function two<br>";
            return 2;
         }
         function three()
         {
            commaFnStr += "function three<br>";
            return 3;
         }
         var p = (one(), two(), three());
         commaFnStr += p;
         commaFnOut.innerHTML = commaFnStr;
      }
   </script>
</head>
<body>
   <h2>Using commas in function calls</h2>
   <div id = "commaFnBtnWrap">
      <p>Click the button</p>
      <button onclick = "evalExprFn()">Click Me</button>
   </div>
   <div id = "commaFnOut"> </div>
</body>
</html>

In the code snippet below, we write the expressions explicitly. This gives readability, and it is easy to understand the code if we practice it like this.

let x = 10;
x++;
let y = x + 1;
console.log(x, y);//11 11

Use comma operator in for loop

In this code, we use commas for a loop.

Example

Here, first, we use the comma operator in the assignment part and then in the increment decrement part. Assigns i=0 and j=2 in the first part. Then we increment the i value and decrement the j value.

<html>
<head>
   <script type = "text/javascript">
      function evalExprFor()
      {
         var commaForBtn = document.getElementById("commaForBtnWrap");
         var commaForOut = document.getElementById("commaForOut");
         var commaForStr = "";
         for(let i = 0, j = 2; i <= 2; i++, j--)
         {
            commaForStr += ('i = ' + i + ', j= ' + j);
            commaForStr += "<br>";
         }
         commaForOut.innerHTML = commaForStr;
      }
   </script>
</head>
<body>
   <h2>Using commas in a for a loop.</h2>
   <div id = "commaForBtnWrap">
      <p>Click the button</p>
      <button onclick = "evalExprFor()"> Click Me </button>
   </div>
   <div id = "commaForOut"> </div>
</body>
</html>

Other Uses

  • To declare multiple variables together. var x = 0, y = 0, z = 0;
  • To list elements in an array.

    [19, 40, 80,]

  • To separate properties of objects.

    { min: 0, max: 100 }

  • To define multiple function parameters.

    function add(a, b) { return a + b; }

  • To call a function with multiple arguments.

    add(20, 60)

  • To destructure arrays.

    const [lower, upper] = [0, 1];

  • To destructure objects.

    const { big, small } = { big: 100, small: 0 };

  • To import multiple module members.

    import { open, close } from "fs";

  • To export multiple module members.

    export { mkdir, rmdir };

In this tutorial, we have discussed the purpose of commas in JavaScript expression. The comma operator also serves different purposes in JavaScript programming.

Updated on: 31-Oct-2022

617 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements