Object defineProperty confuses the way I think about hoisting / sync and async js

Question

I thought I had a good understanding of async / sync / hoisting, when it came to how a browser loads data and presents it to the user. However this following example is throwing me for a loop, let me post the example and then explain the question:

var obj = {
  counter: 0,
};

Object.defineProperty(obj, 'reset', {
  get: function() {
    return this.counter = 2;
  }
});

Object.defineProperty(obj, "increment", {
  get: function() {
    return this.counter++;
  }
});

Object.defineProperty(obj, "decrement", {
  get: function() {
    return this.counter--;
  }
});

console.log(obj.reset) //2
console.log(obj.increment + ' ' + "incremented") // "2 incremented"
console.log(obj.decrement + ' ' + "decremented") // "3 decremented"

I thought that the way the browser would interpret this would be to run every line of code synchronously which should produce:

//2
//2 incremented
//2 decremented

because if you where to track the changes to 'counter' all the way until the console logs are called, counter would change from 0 to 2 to 3 back down to 2.

And then I thought well wait a second; if the values being returned are not all 2 then maybe calling these console logs is an asynchronous way about getting the data which would then logically lead me to think the result should be:

//2
//3
//2

because if you where to access the 'counter' property upon the time of running the console log then logicly the counter value would change from 0 to 2 upon (obj.reset) and then 3 upon(obj.increment) and then 2 again upon(obj.decrement)

I am obviously wrong about the way im approaching how the browser interprets this and would like a clear step by step explanation of why the values being returned are:

//2
//2 incremented
//3 decremented

if at all possible, thank you.

This has nothing to do with asynchrony or hoisting, it's just how the post-increment and post-decrement operators work. — Bergi, May 25 '19 at 21:13

Mister Jojo · Answer 1 · 2019-05-25T21:28:26.770

1

did you notice this ?

var cpt_A = 5;
var cpt_B = 5;

function func_A(){ return cpt_A-- } 
function func_B(){ return --cpt_B } 

console.log ( func_A() )   //  return 5.
console.log ( func_B() )   //  return 4.

It is a basic of the programming of languages resulting from C. in the case func_A it returns the value of cpt_A, then it does the operation of decrementation. in the case func_B it does the operation of decrementation on cpt_B, then it returns the result.

edited May 25 '19 at 21:28

answered May 25 '19 at 20:57

Mister Jojo

20,093
6
21
40

Shouldn't the decrement operator be after the cpt_B like so cpt_B--? and shouldn't func_A return 4? – Ghoyos May 25 '19 at 21:10
No, it's two differents action order. It's a classic case. – Mister Jojo May 25 '19 at 21:30

adiga · Accepted Answer · 2019-05-25T21:17:04.393

This has nothing to with asynchronous. console.log is receiving an expression and it's printing that value. obj.increment returns 2 because that's how postfix ++ operator works. It increments the number and returns the value before incrementing. So, it ends up being

console.log(2 + ' ' + "incremented")

console.log() method ends up getting the string 2 incremented. The same logic applies to decrement. The expression becomes console.log(3 + ' ' + "decremented")

Object defineProperty confuses the way I think about hoisting / sync and async js

2 Answers2