Don't abuse this fancy operator

TL;DR: Use comma operator just for loops

Problems

Readability
Hidden Defects

Solutions

Avoid operator usage
Prefer foreach operator
Break the sentences

Context

In JavaScript, the comma operator allows you to evaluate multiple expressions sequentially and return the value of the last expression.

It's denoted by a comma and separates multiple expressions within a larger expression.

Each expression is evaluated in order from left to right, and the final value of the entire comma-separated expression is the value of the last expression.

Sample Code

Wrong

const gravitationalConstant = 6.67430e-11;

const massBlackHole1 = 1.5e31;  // Mass of the first black hole in kg
const massBlackHole2 = 2.2e32;  // Mass of the second black hole in kg
const distanceBlackHoles = 5.7e20;  // Distance between black holes in meters

var force = (distanceSquared = distanceBlackHoles * distanceBlackHoles,
             (gravitationalConstant * massBlackHole1 * massBlackHole2) /
             distanceSquared);

// Two operations in a single statement with comma operator     

console.log("Gravitational force between two black holes:", force);

Right

function calculateGravitationalForce(mass1, mass2, distance) {
  const gravitationalConstant = 6.67430e-11;
  return (gravitationalConstant * mass1 * mass2) / (distance * distance);  
}

const massBlackHole1 = 1.5e31;  // Mass of the first black hole in kg
const massBlackHole2 = 2.2e32;  // Mass of the second black hole in kg
const distanceBlackHoles = 5.7e20;  // Distance between black holes in meters

const force = calculateGravitationalForce(
  massBlackHole1,
  massBlackHole2,
  distanceBlackHoles
);

// Notice force is calculated with a separate function

console.log("Gravitational force between two black holes:", force);

Detection

[X] Automatic

Many linters can detect this problem.

Exceptions

For loops are a valid exception dough they might lead you to another code smell

Conclusion

This valid operator was designed to shorten for loops but is now sometimes abused.

Relations

Code Smell 53 - Explicit Iteration

Maxi Contieri ・ Jan 5 '21

#codenewbie #webdev #cleancode #tutorial

Disclaimer

Code Smells are my opinion.

Credits

Photo by Stephen Hickman on Unsplash

My computer's so fast it finishes an infinite loop in 5 minutes.

Chisel Wright

Software Engineering Great Quotes

Maxi Contieri ・ Dec 28 '20

#codenewbie #programming #quotes #software

This article is part of the CodeSmell Series.

How to Find the Stinky parts of your Code

Maxi Contieri ・ May 21 '21

#codenewbie #tutorial #codequality #beginners

Code Smell 222 - Comma Operator