Where did this -11 came from?

Question

I was playing around with the following code:

function recaller(){
    while(x-- > 0)recaller();
}

var x = 10;
recaller();
alert(x); //-11?

But I was astonished to find that the x now holds the value of -11

I later added alert(x); above the while , to see if it displayed correctly the numbers 10 to 0 and it did.

Can someone explain me where did the -11 came from?, my debugging skills failed me this time and I have no clue how to keep testing

Answer 1

You are recursing into recaller , so x gets decremented lots of times at the end of the recursion — for each time you recurse, when you exit that recursive call the while loop condition will be checked again, and that expression decrements x . Consider what happens if we start with x = 2 :

1. x is 2, we call recaller (first time) enter its while loop which checks x is greater than zero, decrements and…
2. x is 1, we call recaller (second time) enter its while loop which checks x is greater than zero, decrements and…
3. x is 0, we call recaller (third time) enter its while loop which checks x is greater than zero which it isn't , decrements ( -1 ) and returns
4. unwind the stack once to the second time; in its while loop, check x is greater than zero (no), decrements ( -2 ) and returns
5. unwind the stack once to the first time; in its while loop, check x is greater than zero (no), decrements ( -3 ) and returns
6. return to top level flow
7. x=-3

Answer 2

When you do this:

var x = 10;
alert(x--); // Displays 10
alert(x); // Displays 9

x-- is a post-decrement operator, ie executes after the main eval. Thus:

if(x-- > 10) { 
  // Executes when x is > 10 before decrementing
}

You are doing a recursive looping. Ie you do:

function recaller(){
    while(x-- > 0)recaller();
}

Which:

• Compares x to 10
• Calls recursively
• Decrements x

Since your codition is x > 0 , it will exit from the innermost call to recaller when x = 0, then decrement once, exit into the next recursive call, etc., until you reach -11.

Answer 3

As you probably know, x-- decrements x and then returns its value before the decrement. We can also write your code like this:

function recaller() {
    while(true) {
        var oldX = x;
        x--;
        if(!(oldX < 0)) {
            break;
        }
        recaller();
    }
}

Now it is easier to put logging in there. I think it's a little easier to see with some indentation, so I have a few functions not shown here. With some logging, it looks like this:

function recaller() {
    indent();
    log("Recaller called");
    while(true) {
        log("In loop, before decrement and test");
        var oldX = x;
        x--;
        log("In loop; decremented");
        if(!(oldX > 0)) {
            log("Test failed");
            break;
        }
        log("Test succeeded");
        log("In loop, before recursion");                    
        recaller();
        log("In loop, after recursion");
    }
    log("About to return from recaller");
    dedent();
}

You can see the result on JSFiddle.

Looking at the log, you can tell that it's decrementing it (to down below zero) even when the test fails, resulting in the negative number.