How does recursion work?

Tell us what’s happening:
I don’t really need help with making code, but it’s unclear how the function recurses. I’ve put a bunch of console.log() in some places to track the recursion, but nothing happened (although recursion did happen). Would anyone explain why and tell if there’s in general a way to track recursion?

Your code so far


function sum(arr, n) {
// Only change code below this line
if (n<=0){
return 0;
console.log('rec');
}else{
return sum(arr, n-1)+arr[n-1];
console.log('ursion');
}
// Only change code above this line
}
console.log(sum([2, 3, 4], 1));

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36.

Challenge: Replace Loops using Recursion

Link to the challenge:

Well basicly it works something like this
1
1 1+
1 1+ 1+
and so on and so on

Did you see the inception movie? I made this painting some days ago, I hope it can help you to see what happen when you use recursion:

Your log’s didn’t trigger because they are below the return statements : ) I’d try moving them up above the returns. You might also want to print n on each function call to help you see what’s going on.

1 Like

Recursion is a self looping technique when the base condition in every iteration is (n-1).
This looping technique require the use of call-stack, which means (keeping track when a function is called and in what order).

For example, if you want to add from the number 10 - 1. You would keep 10 in your mind, and then the next number would be (10 - 1). So you get 10 + 9, then you get the next number (9-1), so now you get 10 + 9 + 8. You do this until you reach the base condition which is 1.

function sum( from, to ) {
   return from + ( from > to ? sum( from - 1, to ) : 0 );
}
//Inside the call stack, it would look like this.

sum = 10 + sum( 9, 1 );
sum = 10 + 9 + sum( 8, 1 );
sum = 10 + 9 + 8 + sum( 7, 1 );
sum = 10 + 9 + 8 + 7 + sum( 6, 1 );
sum = 10 + 9 + 8 + 7 + 6 + sum( 5, 1 );
sum = 10 + 9 + 8 + 7 + 6 + 5 + sum( 4, 1 );
sum = 10 + 9 + 8 + 7 + 6 + 5 + 4 + sum( 3, 1 );
sum = 10 + 9 + 8 + 7 + 6 + 5 + 4 + 3 + sum( 2, 1 );
sum = 10 + 9 + 8 + 7 + 6 + 5 + 4 + 3 + 2 + sum( 1, 1 ); 
sum = 10 + 9 + 8 + 7 + 6 + 5 + 4 + 3 + 2 + 1; 
// base condition is met.  

//Traverse up the call stack.
sum = 1 ( 10 + 9 + 8 + 7 + 6 + 5 + 4 + 3 + 2 )
sum = 3 ( 10 + 9 + 8 + 7 + 6 + 5 + 4 + 3 )
sum = 6 ( 10 + 9 + 8 + 7 + 6 + 5 + 4 )
sum = 10 ( 10 + 9 + 8 + 7 + 6 + 5 )
sum = 15 ( 10 + 9 + 8 + 7 + 6 )
sum = 21 ( 10 + 9 + 8 + 7 )
sum = 28 ( 10 + 9 + 8 )
sum = 36 ( 10 + 9 )
sum = 45 ( 10 )
sum = 55
//End of Callstack.

And that’s it.

everything after a return statement is not executed. move the console.logs above the return statements and you will see them

2 Likes

I struggled to “get” recursion from this challenge.

For me, the most helpful thing was solving the problem with pen and paper first. And then writing by hand what the function is doing - especially in each loop of the else statement. If I can solve the problem with pen and paper, then the code generally makes more sense to me.

1 Like

I think this article gives a good overview: