JavaScript Comma Operator

Summary: in this tutorial, you’ll learn about the JavaScript comma operator and its usage.

Introduction to the JavaScript comma operator

JavaScript uses a comma (,) to represent the comma operator. A comma operator takes two expressions, evaluates them from left to right, and returns the value of the right expression.

Here’s the syntax of the comma operator:

leftExpression, rightExpression

For example:

let result = (10, 10 + 20);
console.log(result);Code language: JavaScript (javascript)

Output:

30

In this example, the 10, 10+20 returns the value of the right expression, which is 10+20. Therefore, the result value is 30.

See the following example:

let x = 10;
let y = (x++, x + 1);

console.log(x, y);Code language: JavaScript (javascript)

Output:

11 12

In this example, we increase the value of x by one (x++), add one to x (x+1) and assign x to y. Therefore, x is 11, and y is 12 after the statement.

However, to make the code more explicit, you can use two statements rather than one statement with a comma operator like this:

let x = 10;
x++;
let y = x + 1;

console.log(x, y);Code language: JavaScript (javascript)

This code is more explicit.

In practice, you might want to use the comma operator inside a for loop to update multiple variables each time through the loop.

The following example uses the comma operator in a for loop to display an array of nine elements as a matrix of 3 rows and three columns:

let board = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let s = '';
for (let i = 0, j = 1; i < board.length; i++, j++) {
  s += board[i] + ' ';
  if (j % 3 == 0) {
    console.log(s);
    s = '';
  }
}Code language: JavaScript (javascript)

Output:

1 2 3
4 5 6
7 8 9

How it works.

• Initialize the Board:
  • The code begins by defining an array called board with values from 1 to 9. This array represents a simple board or grid.
• Loop through the Board:
  • The code then initializes an empty string s and enters a for loop.
  • Inside the loop, two variables are declared: i and j. i is used to iterate over the elements of the board array, and j is a counter that increments with each iteration.
• Building a String:
  • Within the loop, each element of the board array is appended to the string s followed by a space.
• Check for Every Third Element:
  • After appending an element to the string, the code checks if j (the counter) is divisible evenly by 3 using the modulus operator (%). This condition (j % 3 == 0) checks if the current iteration is the third element.
• Print and Reset:
  • If the condition is true (meaning it’s the third element), the current string s is printed to the console using console.log(s). This effectively prints a row of three elements from the board.
  • The string s is then reset to an empty string for the next row.
• Loop Continues:
  • The loop continues until all elements of the board array have been processed.
• Output:
  • The final output is a series of rows, each containing three elements from the board array.

Summary

• A comma operator takes two expressions, evaluates them from left to right, and returns the value of the right expression.
• Use the comma operator (,) inside a for loop to update multiple variables once.
• Use two statements rather than the comma operator elsewhere to make the code more explicit and easier to understand.