Learn Recursion by Building a Decimal to Binary Converter

Hi guys. I’m currently working on this lesson and there’s a code that confuses me. I’ve browsed in the forum and there’s someone else asking the exact same question .

const countDownAndUp = (number) => {
  console.log(number);

  if (number === 0) {
    console.log("Reached base case");
    return;
  } else {
    countDownAndUp(number - 1);
    console.log(number);
  }
};

countDownAndUp(3);

can i be corrected if I’m wrong. If i drew the function step by step, will it look something like this ?

"3
3
"

“3
2
2
3”

"3
2
1
1
2
3
"
"
3
2
1
0
Reach base case
1
2
3
"
and finally the function terminates because we’ve reached 0.

I found another post regarding this exact same code and someone actually posted the animation but it actually shows counting down from 3 to 0, reach base case, and counting back up to 3 step by step, which confused me more…

Not really, the second console.log will execute only after the countDownAndUp(number - 1) call is executed

Hello,

I tried to explain this on this topic, and Teller shows it with a great animation. It is about the logic of stack work. This means that the task which comes last in the memory stack is worked on first. You should read this post step by step. Also, try to follow each step on the animation.

Additionally, think of the memory stack here as a box where tasks are placed on top of each other. One task cannot be completed before moving on to the next task. And the first task here is to write all the numbers one by one until reaching the base case if condition. Initially, with the console log at the beginning of the function, 3 is printed, then since the condition in the if block is not met, it goes to the else statement and there the countDownAndUp function is called with number 1 decreased, and 2 is printed to the console. Immediately below, the number is attempted to be printed to the console again, but before that, since the function is restarted, the repetition of 3 is left below until the number-1 function is finished. The function adds new tasks to the stack by calling itself again before the function ends, and so on.

Thank you for the reply! So it actually is counting down from 3 to 0 and reach base case… So were they lining up and waiting until the function terminates when input === 0 ?Then the console.log(1) runs, then console.log(2), then finally console.log(3) ?

Thank you for the explanation! As confusing as it hits me, I think I’m starting to get it… So to clarify, console.log(3) is waiting for console.log(2) to complete, which is waiting for console.log(1) to complete, which is waiting for console.log(0) that terminates the function to complete ?

As I’m typing this, I realized this is what the lesson is exactly explaining lol… I just got confused when I’m trying to picture the function running in my head… Thanks again!

Actually it is not waiting, waiting is different topic on async functions etc. but the semantic is correct, inside of the else stament console.log:

is staying under of the countDownAndUp(number - 1); function call, after this work, console.log(number) which one is inside of the else block is staying under to countDownAndUp(number - 1); again…

You’re welcome, happy coding :slightly_smiling_face: