Basic JavaScript - Use Recursion to Create a Countdown. (Please help me to understand)

[ahks]

Tell us what’s happening:
Describe your issue in detail here.

function countup(n) {
  if (n < 1) {
    return [];
  } else {
    const countArray = countup(n - 1);
    countArray.push(n);
    return countArray;
  }
}
console.log(countup(5));

In the above code, how the value of n is increasing at “countArray.push(n)”? I can’t understand. Please help me to solve this.

  **Your browser information:**

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

Challenge: Basic JavaScript - Use Recursion to Create a Countdown

Link to the challenge:

freeCodeCamp.org

[mahneh]

Good question. I think if you just manually execute the function it is easier. Set n=2 and strictly follow that code.

• We run countup(2) which itself executes countup(1), which itself executes countup(0).

• Then we finally meet the first conditional

• countup(0) returns [ ] which is the first value of countArray. Now count(1) has countArray = [ ] and pushes 1.

• Now for the next function we have countArray = [1] and we push 2

As I said, you need to do this process by yourself and then the magic appears. But a must for recursive function is the first condition that you have.

[hbar1st]

@ahks

function countup(n) {
  if (n < 1) {
    return [];
  } else {
    const countArray = countup(n - 1);
    countArray.push(n);
    return countArray;
  }
}

To understand recursion, you have to understand delegation.
The function countup is supposed to create an array which has the numbers 1 up to n (the input value)

It does it by worrying about one number at a time and delegating the rest of the work.

So let us say we have the number 3 as input.
First it will ask if 3 is less than 1.
It is not.
Then it will say: I have to delegate this big number! I can only handle one number at a time!
This is the line here:
const countArray = countup(n - 1);
Which is essentially delegating the handling of n-1 (2 now) to another countup.

Then the current countup will wait for the next one to return.

The next countup gets the 2. And it asks, is 2<1, no.
So it does delegation also and calls yet another countup but with n-1 . Then it sits and waits

Now the third countup receives a 1
Is 1<1? No.
So again it delegates the result of n-1 (0) to a fourth countup! And waits…

The fourth countup sees a 0. Is 0 less than 1, yes! So it returns an empty array!!! Finally.

This empty array is given back to the third countup mentioned before. Remember it was waiting?
Now it has a response of an empty array so it pushes the number 1 to it (if you recall the third countup was given number 1 as input). Then it returns the result which is an array containing number 1.

Recall that the second countup was waiting around still? Now it is given the array and it adds its number to it so now we have [1,2] and then returns it.

Recall again the very first countup was waiting? Now it is given the array so it can add 3 to it (which was the original input to the first countup).

So we ended up with [1,2,3]

[admit8490]

Grab the code you posted here, and run it using the tool below:

https://pythontutor.com/visualize.html#mode=edit

The replies above are very good, but when we are talking about understanding recursion some kind of visualization of the process may be good addition.

Also I found another nice little app for this purpose:

https://recursion.vercel.app/

[mahneh]

There seems to be a bug in the last link’s code or I didn’t really get how it works.

Each return value is [1,2] when it should be [], [1], [1,2].

The first link is fine but imho not as clear as just doing the simplest case by hand.

[ahks]

Thank you for the explanation. Now I think I understand this point. So every time, countArray.push(n) is waiting because the recursive function does not yet complete its task. And when it reaches its base condition, the const countArray returns with an array, and just after, the waiting countArray.push pushes the value of n. Is this function actually executing in this way? Please suggest to me whether I get the point or not.

[hbar1st]

Yes I think you definitely did understand.

a metaphor for this is an assembly line of people who need to make a tower of bricks. But each person can only add one.
So you give the first person you see the instruction of build a tower 5 bricks high. So he gets his brick ready but he needs to wait for the next person to add their brick etc until we are at the last person who adds his brick to the floor and then everyone can add theirs (one by one) on top.

[ahks]

Thank you so much for your feedback. Your explanation with examples is vivid to understand. Now I can go to the next lesson.