DEV Community

Cover image for Code Smell 222 - Comma Operator
Maxi Contieri
Maxi Contieri

Posted on • Originally published at maximilianocontieri.com

Code Smell 222 - Comma Operator

#webdev #javascript #beginners #programming

Don't abuse this fancy operator

TL;DR: Use comma operator just for loops

Problems

  • Readability

  • Hidden Defects

Solutions

  1. Avoid operator usage

  2. Prefer foreach operator

  3. 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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Detection

[X] Automatic

Many linters can detect this problem.

Exceptions

Tags

  • Readability

Conclusion

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

Relations

mcsee

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

mcsee

Software Engineering Great Quotes

Maxi Contieri ・ Dec 28 '20

#codenewbie #programming #quotes #software

This article is part of the CodeSmell Series.

mcsee

How to Find the Stinky parts of your Code

Maxi Contieri ・ May 21 '21

#codenewbie #tutorial #codequality #beginners

Top comments (0)