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!
Top comments (4)
Great post!
Thanks homie
It was helpful! 👍
awesome! so glad to here it!