Why avoid increment ("++") and decrement ("--") operators in JavaScript?

javascript

best-practices

code-review

linting

byAnton Shumikhin·Oct 24, 2024

Choose explicit assignments (x += 1, x -= 1) over increment (++) and decrement (--) to amplify code clarity and evade elusive bugs. These shorthand operators can be concealing, particularly in complex statements, leading to unintended results.

Example - Instead of:

let a = 1, b = a++;

Use:

let a = 1;
let b = a;
a += 1; // Just to irritate the ++ fans out there

This approach guarantees that the intent of incrementing a after assigning its initial value to b is distinctively clear.

The troubled past of ++ and --

Utilizing increment and decrement operators in JavaScript can introduce off-by-one errors and create confusion in distinguishing pre-increment (++x) from post-increment (x++). for loops may safely host i++ or i--, but explicit expressions like i += 1 or i -= 1 are commendably intelligible.

Why haste makes waste with ++ and --:

Automatic Semicolon Insertion: Benevolent JavaScript's semicolon insertion can accidentally shatter the logic involving ++ and --.
Spooky Closure Actions: In the world of closures, increment/decrement operators might behave like mischievous spirits, altering values beyond the closure's realm.
Language Peculiarities: Not all languages treat ++ and -- similarly. Thus, habits ingrained in JavaScript could spawn bugs in other development environments.
Wisdom from the Oracle, Crockford: The revered Douglas Crockford advises against these operators in pursuit of maintainability and code quality.

Embrace simplicity, bid farewell to shortcuts

Simplify, don't obfuscate: Use explicit assignment statements rather than attempting to be the JavaScript ninja with ++ and -- to prevent bugs. This is particularly necessary in vital code segments like buffer manipulations where a simple off-by-one error might cause a catastrophic buffer overrun.

Code Review Insights: Explicit assignments instead of increment/decrements can make your intentions crystal clear during peer reviews, saving your colleagues the trouble of "deciphering the hieroglyphs" and fueling team productivity.

Farewell ++, Hello +=: Practical examples

Use += and -= to manipulate values for clarity and to align with styles enforced by keen gatekeepers like JSLint.

For Loop Evolution: Instead of this:

for (let i = 0; i < length; i++) {
  doSomething(i); //Feeling nostalgic yet?
}

Consider this:

for (let i = 0; i < length; i += 1) {
  doSomething(i); //This is 21st century now!
}

Variable Manipulation Clarity:

// The art of obfuscation:
let x = 10;
let y = x++ * 2;

// Clear like a summer sky:
let x = 10;
let y = x * 2; //Just simple math!
x += 1;

Make each line speak volumes

The practice of incorporating white space judiciously in your code can be a game-changer in improving readability and reducing scope for mistakes.

Before:

if(i++>10){/*...*/}

After:

if (i > 10) { /*...*/ }
i += 1; //Like planting a flag after winning a war against all those errors!

Visualization

Imagine playing out operations with a crayon (++) and eraser (--):

Your Equation: 5 + 4 = 9
Increment: 5 + (++4)💥 = 10
Decrement: 5 + (--4)🧨 = 8

The crayon & eraser method:

It's easy to overlook where you've modified a number (++, --)
There's a subtle risk of mutating a value when you merely aimed to use it (x++ vs. ++x)
Can lead to unforeseen numerical story twists, like an unpredictable plot device

Preferred: Use + 1 or - 1:

Clear Equation: 5 + (4 + 1)🔍 = 10
                 5 + (4 - 1)🔍 = 9

By sidelining crayons or erasers, you maintain an explicit and consistent narrative in your code.

Prioritize code clarity over cleverness

Code that is readable and predictable is a masterpiece. Abstaining from shortcuts like increment and decrement operators ensures your scripts make sense to both you and your fellow developers.