Learn Recursion by Building a Decimal to Binary Converter - Step 65

JavaScript
1

Tell us what’s happening:

I don’t understand how the console printed 1, 2, 3 after the string statement. Here in example we call the function with parameter 3 and we don’t change it. Does recursive call interfere with the parameter value too.

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region

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

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

countDownAndUp(3);

// User Editable Region

Your browser information:

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

Challenge Information:

Learn Recursion by Building a Decimal to Binary Converter - Step 65

2

So recursion is a notoriously difficult concept for most new developers to wrap their heads around. It will usually take a few tries with writing different recursive functions and see multiple visualizations with the call stack to start to understand it better.

But here is what is happening with your code.

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

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

countDownAndUp(3);

So recursion works with the call stack. As the recursive process happens, you will be pushing and popping from the call stack.

When the function called here

that function call is added to the call stack like this




countDownAndUp(3);
// Bottom of stack

Then you start to execute the code for that function call.
So the first thing would be this console.log here

that will log 3 to the console.

Then we get to the if statement here

does 3 equal 0? No

So we move to the recursive case here

So now we have another function call which gets pushed to the call stack like this



countDownAndUp(2);
countDownAndUp(3);
// Bottom of stack

Now we repeat the process but for the countDownAndUp(2) function call.

The number 2 is logged to the console.
We check the if statement here 2 === 0 which is false.

Then we get to the recursive case and push another function call to the stack


countDownAndUp(1);
countDownAndUp(2);
countDownAndUp(3);
// Bottom of stack

Now we repeat the process but for the countDownAndUp(1) function call.

The number 1 is logged to the console.
We check the if statement here 1 === 0 which is false.

Then we get to the recursive case and push another function call to the stack

countDownAndUp(0);
countDownAndUp(1);
countDownAndUp(2);
countDownAndUp(3);
// Bottom of stack

Now we repeat the process but for the countDownAndUp(0) function call.

The number 0 is logged to the console.
We check the if statement here 0 === 0 which is true so "Reached base case" is logged to the console and we return

Once we return, the countDownAndUp(0); is popped off of the stack like this


countDownAndUp(1);
countDownAndUp(2);
countDownAndUp(3);
// Bottom of stack

Now we are inside the countDownAndUp(1); function call and the last thing we need to do is log 1 to the console here

else {
    countDownAndUp(number - 1); // already did this earlier
    console.log(number); // now log this to the console
  }

Once that’s done, countDownAndUp(1); is popped off of the stack


countDownAndUp(2);
countDownAndUp(3);
// Bottom of stack

And now we are in the countDownAndUp(2); function call and log 2 to the console.
Then countDownAndUp(2); is popped off of the stack


countDownAndUp(3);
// Bottom of stack

And now we are in the countDownAndUp(3); function call and log 3 to the console.
Then countDownAndUp(3); is popped off of the stack

// stack is empty

Finally, the stack is empty and we are done :+1:

2 Likes
3

So the second console.log(number) is executed after the recursive call finishes.

  • Recursive calls create new versions of the function with different arguments (number - 1 each time).
  • Each function “waits” for the deeper recursive call to finish before it resumes.
  • That’s why you see values printed again on the way back up after the base case.
1 Like
4

Thank you very much for such detailed explanation. I feel like I understand it now.

Today I will do 1 more project based on recursion.

Once again thank you very much :slight_smile:

5

Thank you very much. After reading the above explanation and yours, I feel confident now to start my next project.

1 Like