Why is this value 3 in JavaScript? [duplicate]

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
– Arpit Solanki, Commented Jun 28, 2017 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
– Bergi, Commented Jun 28, 2017 at 15:58

sbking · Accepted Answer · 2017-06-28 16:02:19Z

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

brian d foy · Accepted Answer · 2017-07-01 13:49:43Z

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>

Collectives™ on Stack Overflow

Why is this value 3 in JavaScript? [duplicate]

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related