Below is an example from MDN Function scope. I can not understand how the end: 0 and the rest of end: are printed. I was expecting that the console.log("end: " + i); will never be reached.
function foo(i) {
if (i < 0) return;
console.log("begin: " + i);
foo(i - 1);
console.log("end: " + i);
}
foo(3);
Output:
begin: 3
begin: 2
begin: 1
begin: 0
end: 0
end: 1
end: 2
end: 3
The trick to all recursion is the exit condition. Without it the function will run forever or the system runs out of memory. The exit condition for foo is if (i < 0) return;.
Now because javascript is, in this case at least, run synchronously, it will finish whatever it is doing before moving on to the next line of code.
The function calls itself with foo(i - 1); which will in turn call itself and so on until the exit condition is met. It is therefore vital that the exit condition is placed before the recursive call.
To make this easier to understand, consider the value of i for each successive call:
foo(3)
foo(2)
foo(1)
foo(0) // exit condition is met, ending the recursion
print end 0
print end 1
print end 2
print end 3
If I were to write:
console.log("begin");
my_custom_function(1);
console.log("end")
Then console.log will log begin, then my_custom_function will be called, and when my_custom_function has finished it will pick up where it left off and console.log will log end.
It's exactly the same.
When foo has finished, it will return to the calling function (which happens to also be foo) and continue where it left off.
Think about it in blocks. Below I added each step showing the actual i values and indenting it on each recursion. You can see that after the recursion is done, then it will finish the function call on each of the previous blocks.
foo(3) {
if (3 < 0) return;
console.log("begin: " + 3);
foo(3-1) {
if (2 < 0) return;
console.log("begin: " + 2);
foo(2-1) {
if (1 < 0) return;
console.log("begin: " + 1);
foo(1-1) {
if (0 < 0) return;
console.log("begin: " + 0);
foo(0-1){
if (-1 < 0) return; // Exit recursion
}
console.log("end: " + 0);
}
console.log("end: " + 1);
}
console.log("end: " + 2);
}
console.log("end: " + 3);
}
function foo() {
if (i < 0) {
console.log("end: " + i);
clearInterval(lauch);//close the interval
} else { // with an else
console.log("begin: " + i);
i -= 1;
}
}
var i = 3;//global var
var lauch;
start();
function start () {
lauch = setInterval(foo, 1000); // 1 sec or 1000 millisecondes, the function reaload
}Maybe is this you looking for ?
foo()is a call to itself (making this a recursive function). Everything after that call does not execute until the if condition becomes true and returns. The stack unwinds and now calls everything after the internalfoo()executes. It is extremely important to make sure recursive functions have a terminating condition.console.log("end: " + i);will never be reached. - why would you think that? it's just the next step, which is not conditioned on anything