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.
- The code begins by defining an array called
- Loop through the Board:
- The code then initializes an empty string
s
and enters afor
loop. - Inside the loop, two variables are declared:
i
andj
.i
is used to iterate over the elements of theboard
array, andj
is a counter that increments with each iteration.
- The code then initializes an empty string
- Building a String:
- Within the loop, each element of the
board
array is appended to the strings
followed by a space.
- Within the loop, each element of the
- 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.
- After appending an element to the string, the code checks if
- Print and Reset:
- If the condition is true (meaning it’s the third element), the current string
s
is printed to the console usingconsole.log(s)
. This effectively prints a row of three elements from theboard
. - The string
s
is then reset to an empty string for the next row.
- If the condition is true (meaning it’s the third element), the current string
- Loop Continues:
- The loop continues until all elements of the
board
array have been processed.
- The loop continues until all elements of the
- Output:
- The final output is a series of rows, each containing three elements from the
board
array.
- The final output is a series of rows, each containing three elements from the
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 afor
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.