Recursion dilemma! Where is a proper explanation to it?

JavaScript
1

Tell us what’s happening:

  1. in the challenge “get help” “watch a video” doesn’t explain the challenge to understand whats happening exactly.
  2. So I tried the web and ended up checking a forum explanation by @snigo . Here again i dont understand what exactly is happening . here is the post below
    freeCodeCamp Challenge Guide: Use Recursion to Create a Countdown

The confusion:
I inserted console log to the example provided by @snigo to see if i will understand what exactly is happening. when i saw this values stored in the array [3,2,1] i ve been wondering from where 3 popped up. Right after when [2,1] is stored in the array, 3 is added to it immediately. how? from where 3 came from?
part of console log results
5
[ 5 ]
4
[ 4 ]
3
[ 3 ]
2
[ 2 ]
[ 2, 1 ]
[ 3, 2, 1 ](this line is in Question)

Your code so far




function countdown(n) {
// base case

if (n === 1) return [1];

const output = [n]; // [2]
console.log(n);
console.log(output);
console.log(output.concat(countdown(n - 1)));
return output.concat(countdown(n - 1)); // [2, 1]
}

console.log(countdown(5));

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36.

Challenge: Replace Loops using Recursion

Link to the challenge:

2

the [3] that you see above

to see better where each line is included, you can add n at the beginning of each console.log

console.log(n, output);
console.log(n, output.concat(countdown(n - 1)));

so you can see from which function call each thing is logged

my suggestion would be even to write it like

function countdown(n) {
// base case

   if (n === 1) return [1];

   const output = [n]; // [2]
   console.log(n);
   console.log(n, output);
   let nextFunctionOutput = countdown(n - 1);
   console.log(n, nextFunctionOutput)
   let result = output.concat(nextFunctionOutput);
   console.log(n, result);
   return result; // [2, 1]
}
1 Like
3

Hey @Hisoka!

I am a beginner as well and when I first learned recursion I was confused too. Recursion is often described as a function that calls itself. So, to a beginner it might seem like it just magically works. But there is actually something going on that isn’t magic.

Recursion finally clicked for me during Harvard’s CS50 course. Doug LLoyd’s explanation of recursion and call stacks with visuals are what made it finally stick for me. I would share Doug’s video but the code is written in C.

Colt Steele has great videos on recursion and call stacks that are written using Javascript so I will share those videos instead.

Hope this helps!

Happy coding!

1 Like
4

Thanks, I will try it out. :slightly_smiling_face:

5

Thanks, I will check them out :slightly_smiling_face:

6

hi

I tried the code and saw the logs. I added countdown(5) to run. Now i am wondering the same question. from the log list below

  • 5, [5]
  • 4, [4]
  • 3, [3]
  • 2, [2]
  • 2, [2, 1]
  • 3, [3, 2, 1] This is in question.

From where 3 came from. How did it increment from 2 to 3. Unless 5 was subtracted with 2.

Another Question when this log line

  • 2, [2, 1]
    which I believe is from the code
    console.log(n, result);
    After this code line. What is the next command line?
  • is it return result; ?
  • or does it go out the block and run the function again?
  • or the loop starts again from result = output.concat(nextFunctionOutput);

I think it will take some time for me to understand this…

7

this is returned by the function with n=2

then the function with n=3 keeps executing
in that one an array with value of [3] is initialized, and is concatenated to the return value of the function with n=2

try looking at it with this:
http://pythontutor.com/javascript.html#mode=edit

1 Like
8

Thanks the videos helped alot. It clarified what is happening.

The stack calls.

I learned a new thing.

thank you. :love_you_gesture:

9

Thanks, @ILM.
Thats the information that i was lacking.
The video shared by @jwilkins.oboe helped a lot.
And thanks to the link for visualizing javascript log :blush:

Many thanks :love_you_gesture:

1 Like