Please help me with a recursive function

Question

Good day. There is a recursive function:

function f(counter) {
    counter--;
    document.write("<p style='background: blue'>" + counter);
    
    if(counter != 0) {
        f(counter);
    }
    
    document.write("<p style='background: yellow'>" + counter);
}

f(3);

I do not understand how it works.

In the function gets 3 - value counter. Then the counter is decreased, it becomes 2. The next step is displayed with the value of the blue section 2. Then the condition that the counter is not 0 - function recursively calls itself. On the next start counter value decreases and becomes 1. Then the unit is displayed in the blue section. Then again triggered the condition, because even counter is not 0, the function calls itself again, reducing the counter to 0 and outputs 0 in the blue section. The next step counter falls into a condition in which the recursive calls terminate. Function outputs 0 in the yellow section. But then I wonder why the terminal 1 and 2 in the yellow section?

I understand why the output of 2, 1, 0 in the blue section - because the condition is triggered if (counter! = 0) and the function calls itself. If counter == 0 condition is not triggered and f (0) terminates the call - Conclusions 0 in yellow section. But why then completing the previous function calls - 1 and 2 outputs them in the yellow section, and not in the blue, it's not me that's understandable.

Answer 1

Recursion can be confusing if you haven't dealt with it, but I will try to explain:

You call:f(3)

So it enters and calls: document.write("<p style='background: blue'>" + counter);

which prints then blue line with a 2 as the counter is 2 after the counter--, then it calls f(2) (because counter != 0 as it is 2.)

So it calls: document.write("<p style='background: blue'>" + counter);

which prints then blue line with a 1 as the counter is 1 after the counter--, then it calls f(1) (because counter != 0 as it is 1.)

So it calls: document.write("<p style='background: blue'>" + counter);

which prints then blue line with a 0 as the counter is 0 after the counter--, then it does not call f(0) (because counter == 0)

so now we complete the function we are in (where 'counter == 0') and it calls: document.write("<p style='background: yellow'>" + counter);

which prints then yellow line with a 0 as the counter is 0

then we go back to the function were we called f(0) from and counter == 1 and that calls document.write("<p style='background: yellow'>" + counter);

which prints then yellow line with a 1 as the counter is 1

then we go back to the function were we called f(1) from and counter == 2 and that calls document.write("<p style='background: yellow'>" + counter);

which prints then yellow line with a 2 as the counter is 2

I know this is confusing but I hope it helps?

* EDIT * Here is my more detailed and hopefully very clear explanation!

Here is my try:

function f(3) {
    counter--;
    document.write("<p style='background: blue'>" + counter);

    if(counter != 0) {
        f(counter) // counter equals 2
    }

    document.write("<p style='background: yellow'>" + counter);
}

So lets just replace f(counter) aka f(2) above with what is actually being called (placing counter w/ counter2 because they are separate variables:

function f(3) {
    counter--;
    document.write("<p style='background: blue'>" + counter);

    if(counter != 0) {
            counter2 = counter;
            counter2--;
            document.write("<p style='background: blue'>" + counter2);

            if(counter2 != 0) {
                f(counter2) // counter2 equals 1
            }

            document.write("<p style='background: yellow'>" + counter2);
        }
    }

    document.write("<p style='background: yellow'>" + counter);
}

Now again, lets just replace f(counter2) aka f(1) above with what is actually called (replacing counter2 w/ counter3 as again they are separate variables.)

function f(3) {
    counter--;
    document.write("<p style='background: blue'>" + counter); // prints 2

    if(counter != 0) {
            counter2 = counter;
            counter2--;
            document.write("<p style='background: blue'>" + counter2); // prints 1

            if(counter2 != 0) {
                 counter3 = counter2;
                 counter3--;
                 document.write("<p style='background: blue'>" + counter3);  // prints 0

                 if(counter3 != 0) { // counter3 equals 0 so this is false
                     f(counter3);  // this is never called because counter3 DOES equal 0
                 }

                 document.write("<p style='background: yellow'>" + counter3);  // prints 0
            }

            document.write("<p style='background: yellow'>" + counter2); // prints 1
        }
    }

    document.write("<p style='background: yellow'>" + counter); // prints 2
}

Answer 2

It's because counter is a local variable scoped to function f.

// value of counter = 2
document.write("<p style='background: blue'>" + counter);

if(counter != 0) {
    f(counter) // calling f(2), must wait for function to return before continuing.
}

// after return, the value of counter is still 2 because it's a local variable
document.write("<p style='background: yellow'>" + counter);

Answer 3

But why then completing the previous function calls - 1 and 2 outputs them in the yellow section, and not in the blue, it's not me that's understandable.

Because after executing f(3), function is not terminated and is awaiting for completion of f(2) call. When it is done, then it goes further and writes 3 into yellow div. And so on for each counter.

Imagine f calls not itself inside but some other function myFunc. It waits until myFunc is ended. With recursion the same flow.

Answer 4

This probably happens because the variable "counter" is a local variable into function f. You should cache the variable in order for the f to run as you describe. Check this answer here: javascript for loop variable and recursion it describes a similar problem and its solution.

Answer 5

I realized we recursively calls f (2), f (1), f (0), but we do not end the call when if (counter! = 0), this condition will not work. The display will 0 in yellow. Now we need to complete the rest of the function f (1) and f (2), these functions have document.write ("<p style = 'background: yellow'>" + counter) ;. It turns out that when we complete these challenges is output 1 and 2 in the yellow.