Increment(++) Weirdness in JavaScript

#javascript #codenewbie #beginners #webdev

The increment(++) and decrement(--) operators are very useful in JavaScript but can be misleading depending on whether they are used as a prefix operator (as in ++x) or a postfix operator(as in x++).

Increment as a postfix operator:

let a = 3;
a++;

console.log(a); // a is 4

Ok, everything seems normal here. The increment operation (a++) executes and the new value of a is 4.
Super useful right? We also use the postfix increment in for loops constantly:

for(let = 0; i < whatever; i++) {
// loop-de-loop
}

So, we

initialize i at zero.
Then, if i is less than "whatever",
i equals i + 1 i.e we add 1 to i

The increment in this case is adding another go-round of the loop, until it reaches "whatever".
Awesome, so far, so good.

Check out the next example for incoming weirdness.

let x = 3;
//POSTFIX 
let y = x++;

console.log(x); // x is 4
console.log(y); // y is 3 because assignment of y to value of 
// x happens BEFORE increment

So why does this happen?

Under the hood, JavaScript executes the assignment of y to the value of x,
THEN continues and evaluates x++.

When using increment (or decrement) as a prefix operator, the behavior is what you would expect:

let alpha = 3;
//PREFIX
let beta = ++alpha;

console.log(alpha); // x is 4
console.log(beta); // y is 4 because assignment happens AFTER increment

JavaScript engine sees y is assigned to something about to be incremented because of the ++ operator,
so JS evaluates increment
THEN finally assigns value to y.

I decided to write this after being sloppy with using the postfix operator and seeing weird results, so I wanted to understand what was going on. Now you will too, happy coding!