Why is this value 3 in JavaScript?

Question

I think the code below should display 4, why does it produce 3?

function arithFunc() {
    var n = 0;
    return {
        plusOP: function() {
            return n++;
        },
        minusOP: function() {
            return n--;
        }

    };
}

var aTest = arithFunc(),
    bTest = arithFunc();

document.getElementById("demo").innerHTML = aTest.plusOP();
document.getElementById("demo").innerHTML = aTest.plusOP();
document.getElementById("demo").innerHTML = bTest.minusOP();
document.getElementById("demo").innerHTML = aTest.plusOP();
document.getElementById("demo").innerHTML = bTest.minusOP();
document.getElementById("demo").innerHTML = aTest.plusOP();

<p id="demo"></p>

First thing to do is correct your code formatting so that we can understand easily. — Arpit Solanki, Jun 28 '17 at 15:55
It might help a lot to fill an array with all the result values and look at all of them, not only the last. — Bergi, Jun 28 '17 at 15:58

sbking · Accepted Answer · 2017-06-28T16:02:19.447

5

You are using postfix increment and decrement operators. These are calculated after the value is returned. For example:

var n = 0;
console.log(n++); // 0
console.log(n); // 1

Try using prefix operators instead:

var n = 0;
console.log(++n); // 1
console.log(n); // 1

Your code would then look like:

function arithFunc() {
    var n = 0;
    return {
        plusOP: function() {
            return ++n;
        },
        minusOP: function() {
            return --n;
        }

    };
}

edited Jun 28 '17 at 16:02

answered Jun 28 '17 at 16:00

sbking

7,630
24
33

I suggest showing `console.log(++n);` behavior as well – Patrick Barr Jun 28 '17 at 16:01
@PatrickBarr Good point, added. – sbking Jun 28 '17 at 16:03
I understand. Thank you~ – Jehyun Jun 30 '17 at 15:12
@Jehyun Can you mark this answer as accepted? – sbking Jun 30 '17 at 15:56

score 3 · Answer 2 · edited Jul 01 '17 at 13:49

You are over-complicating things: n++ evaluates to the value of n, and then increments n.

aTest and bTest have their own private copies of n, so all those bTest.minusOP invocations are irrelevant to the final contents of p#demo which only gets the value returned by the last plusOP.

n starts out as zero. The first return n++ returns 0 and increments n to 1. The next return n++ returns 1 and increments it to 2 etc etc

function arithFunc() {
  var n = 0;
  return {
    plusOP: function() {
      return n++;
    },
    minusOP: function() {
      return n--;
    }

  };
}

var aTest = arithFunc(),
  bTest = arithFunc();

document.getElementById("demo").innerHTML += " " + aTest.plusOP();
document.getElementById("demo").innerHTML += " " + aTest.plusOP();
document.getElementById("demo").innerHTML += " " + bTest.minusOP();
document.getElementById("demo").innerHTML += " " + aTest.plusOP();
document.getElementById("demo").innerHTML += " " + bTest.minusOP();
document.getElementById("demo").innerHTML += " " + aTest.plusOP();

<p id="demo"></p>

Why is this value 3 in JavaScript?

2 Answers2