Good day. There is a recursive function: 

```js
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.