DEV Community

challey17
challey17

Posted on

Increment(++) Weirdness in JavaScript

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

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

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

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

Collapse
 
vincentntang profile image
Vincent Tang

Great post!

Collapse
 
chaycek profile image
challey17

Thanks homie

Collapse
 
binmansoor11 profile image
Talha Mansoor

It was helpful! 👍

Collapse
 
chaycek profile image
challey17

awesome! so glad to here it!