Comma Operator — The Powerful , most commonly misunderstood. operator in JavaScript

Comma Operator — JavaScript

As a human we intentionally or unintentionally tend to take powerful things granted, which are close to us.

Comma operator is probably the most used and powerful operator in day to day coding and may be most granted as well.

The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand (MDN)

Brackets:

* Multiple Declarations in a line:
let a, b, c, d, e, f, z;
0. Without Brackets:
let t = 1,3; // Uncaught SyntaxError: Unexpected number
// Note t, 3 : t will be 3 but 

console.log(t); //  ReferenceError: t is not defined
1. Variable group
z = (7, 5);
console.log(z); // Output:  5

2. Group with different variables 
a = (b = 5, c = 6);
console.log(a); // Output: 6 
console.log(b); // Output: 5 
console.log(c); // Output: 6 

3. Spread operator, comma
e = [1, 2, 3, 4];
f = 0;
d = ([...e], f);
console.log(d)
// output 0

4. Turnery
var foo = () => 3;
var bar= () => 2;
var result =  x?(foo(),bar()):1;
// Output:  2

Comma Operator precedence:

Let’s simulate below statement:
Given three operators (*, + and ,) and following expression: 2 * 2 + 3, 11

//1. executes * operator
return 4 + 3,  11;
//2. executes + operator
return 7, 11;
//3. executes , operator
return 11;

The comma operator has the lowest precedence of any operator hence, above execution result will be similar to of Ex: 0, Without Brackets above.

Also, We create group of comma separated values from RHS expression by wrapping in parentheses above so, it will have the highest precedence.

Trailing comma

The comma that comes after the last item in list called Trailing comma. JavaScript allows in most of the ES5 features eg. array, function , objects, param, function call, even when It’s not required but in some instances in JS we’re allowed to put it there in some it fails:

// Array:
let arr = [1,2,3,]; // length 3
let arr1 = [1, 2, 3,,,]; // length 5
/* Note:: Checking value of black index returns undefined. */
// Objects and classes
let obj = {
 foo: “string”,
 bar:”baz”,
}
var obj = {
one(a,) {},
two(a, b,) {},
};
class DemoClass{
 one(a,) {},
 two(a, b,) {},
}
// function
function f(p) {} 
function f(p,) {}
(p) => {};
(p,) => {};

Trailing commas are not allowed in JSON and Most of ES6 features

JSON:
JSON.parse('[1, 2, 3, 4, ]');
JSON.parse('{"foo" : 1, }');
// SyntaxError JSON.parse: unexpected character
Params
function f(,) {} 
// SyntaxError: missing formal parameter
(,) => {};       
f(,)             
// SyntaxError: expected expression, got ','
Rest Params
function f(...p,) {} 
// SyntaxError: parameter after rest parameter
(...p,) => {}       
 // SyntaxError: expected closing parenthesis, got ','
Destructuring
var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

This might be very basics content for folks out there, I found important to capture this info to realisation, #ThePowerOfBasics.

Since this tweet i think, have been more inclined towards basics and details. #learnTolearn #selfInspiration #deepLearning

Any suggestions and modifications are welcome! :)

Resources:

ECMAScript® 2018 Language Specification

The JavaScript Comma Operator

Operator precedence

Comma operator

Trailing commas