DEV Community


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;

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;
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;
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)

vincentntang profile image
Vincent Tang

Great post!

chaycek profile image

Thanks homie

binmansoor11 profile image
Talha Mansoor

It was helpful! 👍

chaycek profile image

awesome! so glad to here it!