JavaScript - Comma Operator

JavaScript Comma Operator

The comma operator (,) in JavaScript evaluates the multiple expression from left to right. You can use the resultant value of the left expression as an input of the right expression. After evaluating all expressions, it returns the resultant value of the rightmost expression.

However, the comma operator is also used in the 'for' loop, array, object, etc. In this chapter, you will learn all the use cases of the comma operator.

Syntax

You should follow the below syntax to use the comma expression to evaluate multiple expressions.

var answer = (exp1, exp2, exp3, ex4, ...);

Return value

It returns the resultant value of the last expression only.

Examples

Let's understand the JavaScript comma operator in details with the help of some exmaples

Example: The Comma Operator with Strings

In the example below, we have added the 4 comma seprated strings in the braces. Here, each string works as an expression. The code will evaluate the string and return the last string. In the output, you can see that it prints the 'CSS' as it is the rightmost string.

<html>
<body>
    <p id = "output"> </p>
    <script>
        let output = document.getElementById("output");
        let ans = ("JavaScript", "Python", "HTML", "CSS");
        output.innerHTML = "The value of the ans variable is: " + ans;
    </script>
</body>
</html>

Example: The Comma Operator with Expressions

In the example below, we have defined the variable 'a' and initialized it with 5. In the 'ans' variable, we store the resultant value the comma operator returns. The first expression updates the value of a to 8, the second expression increments the value of a by 1, and the third expression adds 2 to the updated value of the variable 'a'.

The value of the 'ans' is 11, which is returned by the rightmost expression of the comma operator.

<html>
<body>
    <p id = "output"> </p>
    <script>
        let output = document.getElementById("output");
        let a = 5;
        let ans = (a = 8, a++, a += 2);
        output.innerHTML = "The value of the ans variable is: " + ans;
    </script>
</body>
</html>

Example: The comma operator with functions

In the example below, we have defined the first() and second() functions. Also, it prints the message and returns the value from the function according to the function name.

We use the comma operator to execute the multiple functions. In the output, you can see that it invokes both functions but prints the returned value from the second() function only.

<html>
<body>
    <p id="output"> </p>
    <script>
        let output = document.getElementById("output");
        function first() {
            output.innerHTML += "The first function is called! <br/>";
            return 1;
        }

        function second() {
            output.innerHTML += "The second function is called! <br/>";
            return 2;
        }

        let ans = (first(), second());
        output.innerHTML += "The value of the ans variable is: " + ans;
    </script>
</body>
</html>

Other Use Cases of The Comma Operator

For defining the multiple variables in a single row.

let m = 1, n = 2, x = 3;

To initialize the array with multiple elements.

const arr = [10, 20, 30, 40, 50, 60];

For defining the object with multiple properties.

const obj = {
   name: "tutorialspoint",
   age: 10,
   ... other properties
}

You can use the comma operator for loop to initialize or update multiple variables in each iteration.

for(let p = 0, q = 1; p < n; p++, q++) {
 // Code for the loop
}

To pass multiple parameters of arguments into the functions.

function func(param1, param2, ... ) {  
 // function code
 }

OR
func(10, 20, 30, ...);

To import or export

import { func2, variable } from './module2.js';
OR
export {func1, variable, num};

To destructure arrays of objects.

let [a, b, c] = [34, 72, 23]; 

To print multiple variables in the console.

console.log(a, b, c) // a, b, and c are variables.