Why is `x === x++` true and `x++ === x` false in Javascript?

Question

Can you explain the difference between these two logical operations :

let x = 1;

console.log('x = ' + x);
console.log('x ===  x++ : ' + (x ===  x++));

x = 1;

console.log('x = ' + x);
console.log('x++ ===  x : ' + (x++ ===  x));

Answer 1

The postfix increment (y = x++), does increase the value, but evaluates to it's previous value. It barely equals:

  x² = x; // evaluate previous value of x
  x += 1; // increase x
  y = x²; // use previous value

So therefore x === x++ is equal to:

  // evaluate left side of ===
  x¹ = x;
  // evaluate right side
  x² = x;
  // ++
  x += 1;
  // comparison
  x¹ === x² // true

wereas x++ === x is:

  // evaluate left side
  x¹ = x;
  // ++
  x += 1;
  // evaluate right side
  x² = x; // x was already incremented!
  // comparison
  x¹ === x²

Answer 2

First, I assume that the expression is evaluated from left to right, see the demonstration below:

console.log('(1 == 2) == 2 - left first          - ', (1 == 2) == 2 )
console.log('1 == (2 == 2) - right first         - ', 1 == (2 == 2) )
console.log('1 == 2 == 2   - same as left first  - ', 1 == 2 == 2   )

or in ECMA 262

---

Theory done, so in x === x++, under the hood it transplies to

// init temporary variables x_left/x_right in CPU for the calculation
x_left = x_right = x; 

// `===` is evaluated first:
x_left === x_right; // true

// then `x++` evaluate, doesn't affect the result `true` above
x_right += 1; 
x = x_right;

And in x++ === x, it transpiles to

// init temporary variables for the calculation (in CPU)
x_left = x_right = x;

// `x++`
x_left += 1;
x = x_left;

// `===` operator
x_left === x_right; // false

Answer 3

This happens because the order of increment operator (before or after the variable) matters.

Using x++ will return the variable first then increment it, while using ++x will increment it first then return the result.

Example:

x = 0;
console.log(x++, x); // 0, 1 (first return the variable then increment)
console.log(++x, x); // 2, 2 (first increment then return the variable)

In the first comparison, you are incrementing it after all uses of variable:

x = 0;
//    0 === 0
      x === x++

In the second comparison, you first use the x value, then increment it and compare with new x value:

x = 0;
//    0   === 1
      x++ === x

Answer 4

The operators ++ can be placed either after a variable.

When the operator goes after the variable, it is in “postfix form”: x++.

The “prefix form” is when the operator goes before the variable: ++x.

let x = 1;

console.log('x = ' + x);
//print x = 1
console.log('x ===  x++ : ' + (x ===  x++));
//(x ===  x++) that means
//(1 === 1)
//true

x = 1;

console.log('x = ' + x);
//print x = 1
console.log('x++ ===  x : ' + (x++ ===  x));
//(x++ ===  x) that means
//(1 === 2) works the same as x = x + 1, but is shorter
// false

Answer 5

When evaluting the === operator in javascript, it evalate the left operand first， and then the right operand, and does the comparison in the last. See ecma262.

And, when x++ is evaluted, the value of x is changed, and the result of x++ is the original (unchanged) value of x.

So, in x === x++ ，both x and x++ evalutes to the original value of x，the value of x is changed after that. So the result is true.

In x++ === x, the value of x is changed when evaluating the left x++, and the left operand evaluates to the original value. But the right operand eveluates after this, so it evaluates to the changed value of x. So the result is false.

Answer 6

It's because the value x is incremented just before you read it again so x++ === x is false and x === x++ is true. There is some other operator that looks almost the same ++x which increments variable immediately.

let x = 0;
console.log(x++); //0
console.log(x); //1
let y = 0;
console.log(++y); //1
console.log(y); //1

Answer 7

x === x++ Here, x=1 before comparing, so returns true.

x++ === x Here, because of operator precedence,
this equals x === ++x where x is incremented and hence returns false.

Answer 8

This is basic computer science, x++ means use then update.

x = 1; 

x === x++

here value of x is changed after comparison is over.

x++ ===  x

here in beginning, x++ value remains 1 but once === is executed, value of x changes to 2.

Answer 9

Interesting.

In the second case, x++ is being evaluated as 1 then it increments x (becomes 2). So the comparison ends up being 1 === 2

Answer 10

x++ is a post increment operator, it basically put the value of x already and then increment it by 1. In the first case x===x++. It suggests, 1===1 while in the second case x++===x ,the value of x is incremented before the comparison, So it becomes 1===2,which is false of course.

Answer 11

x === x++ : first compare x with x then x++ x++ === x : first x++ and then compare the result of x++ with x