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

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

• javascript

Share Improve this question Follow asked Mar 25, 2012 at 20:47 ajax333221ajax333221 11.8k1616 gold badges6262 silver badges9595 bronze badges 3

• Where is the alert that gave you -11? – gdoron Commented Mar 25, 2012 at 20:48
• 1 you can better use console.log instead of alert – Wouter J Commented Mar 25, 2012 at 20:49
• @gdoron updated question, after var x = 10;recaller(); – ajax333221 Commented Mar 25, 2012 at 20:50

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 17

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

When you do this:

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

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

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

You are doing a recursive looping. I.e. 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.

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.