How the statements "x++;" and "x = x + 1;" behave and why they are different? (Case javascript)

Add-ons Development
#1

Hi,

This is my first post and I would like to raise and resolve a javascript code behavior issue according to the following two cases:

CASE 1

According to the following javascript code, what is the result?

      var x;

      x = 0;

      x = x++;

      console.log("Value of x: "+x);

Case 1 can be really confused. The result should be “Value of x: 1”. It’s expected that “x++” will increase by 1 and then be assigned to the variable “x” (x = x++;).

However, the correct answer is “Value of x: 0”. This is because this statement does not behave as explained above.

CASE 2

According to the following javascript code, what is the result?

     var x;

     x = 0;

     x++;

     console.log("Value of x: "+x);

In this second case the result is the expected one “Value of x: 1”; because the line “x++;”" increase the variable “x” by 1.

In the first case the behavior of the code is equivalent to the following:

      var x;

      x = 0;

      x = x++; => var temp = x; x = x + 1; x = temp;

      console.log("Value de x: "+x);

The line “x = x ++;” when assigning the increment itself, the value of “x” is stored in a temporary variable (var temp = x;), which we do not see but that the machine does use internally for after making the increase (x = x + 1;) re-assign that temporary value to the variable “x” so in the result line we have lost an increase that had been made.

The above demonstrates that “x = x + 1;” is different from “x = x ++;” since they don’t behave the same. In the first case “x = x + 1;” the increment is made then assigned to the variable “x”. In the second case “x = x ++;” is also done but subsequently we lose it by assigning the temporary variable to the variable “x” that system performs internally. In addition, this behavior doesn’t happen only in javascript, the same happens in every programming language.

Greetings to all

#2

Crazy :smiley:, seeing x = x++; made me really think what the result will be. But it makes sense, using x++ will get you current value and increment x, then you override the incremented value with the returned value 0.

But I would say, don’t use var, use const, that will not allow you to use x++ or ++x in the first place and everything will be simpler :slight_smile: . If you need loop, use map, forEach or reduce.

My favorite JavaScript riddle is this:

for (var i = 0; i < 5; i++) {
  setTimeout(function() { console.log(i); }, 0);
}
1 Like
#3

++ is an operator. Depending on where you put it, it returns different results:

i = 0
log(i++) => log(0)

i = 0
log(++i) => log(1)

i++ means: increase i by one and return the previous value.
++i means: increase i by one and return the new value.

When using the result of an increment operator you should be aware of where it is positioned, as it returns different results. Aside from the fact, that doing a double assignment is not necessary.

If you don’t like the ++ syntax and need to have an assignment visible, use += instead:
i = 0
console.log(i += 1) // 1

And about the setTimeout riddle: closures are really something that can be confusing for beginners, but very worth learning and properly understanding, as javascript has lots of places where they are being used.

#4

By the way, I think these kinds questions are better asked on stackoverflow, as you have a bigger community there.