Logic of function loop

Question

I’m starting study of functions in Javascript and analyzing the loop below came to me the question about the logic of the result.

function foo(i) {
   if (i < 0)
      return;
   document.writeln('begin:' + i);
   foo(i - 1);
   document.writeln('end:' + i);
}
foo(2);

The result:

begin:2 
begin:1 
begin:0 
end:0 
end:1 
end:2 

but in my understanding of beginner the result should be:

begin:2 
begin:1 
begin:0 
end:1 
end:0 

I would like a didactic explanation so as not to continue with this doubt.

Answer 1

You did table test? And in the test you gave the result you think should happen? If you think that’s so, you could have justified how you got your result.

I can’t even imagine why I would give what you expect. Come on:

1. The function is called and i is worth 2, therefore i is not less than 0 and prints 2, and then calls itself now with the value 1.
2. New execution with i worth 1, therefore i is not less than 0 and prints 1, and then calls itself now with the value 0.
3. Now another execution with i 0 therefore i is not less than 0 and prints 0, and then calls itself now with the value -1.
4. One more execution with i for -1, therefore i is less than 0 and ends the execution right there returning to the control of the caller, so will continue what was doing in step 3.
5. The continuation will obviously be the line followed by the function function call foo() that has the value of i what is described in step 3 and there it is clear, ì is worth 0, is the printed value. And it closes, handing control of its calling function, in case will continue what was doing in step 2.
6. Again the line will be followed by the function function call foo() that has the value of i what is described in step 2 and there it is clear, ì is worth 1, is the printed value. And it closes, handing control of its calling function, in case will continue what was doing in step 1.
7. Finally there continues the line followed by the function function call foo() that has the value of i what is described in step 1 and there it is clear, ì is worth 2, is the printed value. And it closes, handing control of its calling function, in the case is the one who made the initial call.
8. And in its continuation closes the program and nothing else is done.

Probably lost his way in the stream and thinks he’s heading back somewhere else. The function call is a flow deviation that goes to a place, when that place ends it goes back to exactly the same place it was.

If you have two prints the amount of prints would certainly be even, your logic dictates printing 5 times, how is that possible? Note that does not have an early waxing in the middle, or closes at the end or closes right at the entrance, do not stand in the middle.

I even thought you thought the variable i is global and changed the value is the same in all execution, but would not even have logic. Each i is independent.

Let’s think about the same calls but without being recursive, IE, calls were made with the values 2, 1, 0, -1 (yes had a call like this, but that does not generate impression):

function foo(i) {
   console.log('entrei com valor i: ' + i);
   if (i < 0) {
      console.log('entrou no if e i: ' + i);
      return;
   }
   document.writeln('begin:' + i);
   console.log('chamará nova função e i: ' + i + ', então chamará com o valor ' + (i - 1));
   foo (i - 1);
   console.log('voltei pra função que estava e i: ' + i);
   document.writeln('end:' + i);
   console.log('estou encerrando a função e i: ' + i);
}
console.log('vou começar');
foo(2);
console.log('terminei');

I put in the Github for future reference.

It does what we call pile.