Basic JavaScript: Use Recursion to Create a Countdown - can someone please explain the example

can anyone please explain what is happening in the example code (especially after the ‘else’). I do not understand the code even after reading (several times) the explanation provided. In the forum I see a lot of references for how to write the correct solution code but I don’t understand the example code so I’m unable to figure out where to start with the solution. Thank you.

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

first think of ‘n’ as 5.
if n is less than 1 then return an array,
else (if the n is greater or equal 1) get the return value of countup(5-1) and push to that value n (which is 5).

what is the value of countup(5-1) in other words countup(4)?
‘n’ in this context is 4.

if n is less than 1 it return an array,
else (if the n is greater or equal to 1) get the value of countup(4-1) and push to that value ‘n’ ( which is 4).

a question for you.
what is the value of countup(4-1) ?

Thank you for your response.

first think of ‘n’ as 5. Ok, I understand this
if n is less than 1 then return an array, yes I understand this
else (if the n is greater or equal 1) get the return value of countup(5-1) and push to that value n (which is 5). what is the return value of ‘countup(5-1)’?

what is the value of countup(5-1) in other words countup(4) ?
‘n’ in this context is 4. how does n become 4? n-1 is 4, but how does n become 4? How can n be the same as n-1?

if n is less than 1 it return an array,
else (if the n is greater or equal to 1) get the value of countup(4-1) and push to that value ‘n’ ( which is 4). Again, I don’t understand how the value of n has changed. we called the function with ‘5’ so how can it now be 4? n-1 is 4, but ‘n’ itself is still 5, right?

a question for you.
what is the value of countup(4-1) ? this would be countup(3)

Also - I think .push is used to add to the end of an array, but where are we actually creating the array to add to?

Hey @Sharad823,
We like to describe the initial if statement as a “base case”, and the else statement as the “recursive case”. Its often helpful to think of the “recursive case” as a question that can only be answered by calling the function again.

What is the result of countup(5)?
Well we can’t answer that question until we know the result of countup(4)…

What is the result of countup(4)?
Well we can’t answer that question until we know the result of countup(3)…

What is the result of countup(3)?

What is the result of countup(0)?
Oh… we know the answer to that question

1 Like

Thanks for the reply. I don’t really understand your explanation…

I’m not attempting to explain, but need a bit of clarification. I see that it works as intended, but my question comes in the else statement.

We start with n = 5, which I get.
5 is not less than one so we move onto the else statement.

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

If const countArray = countup(n -1); wouldn’t at this point, even calling the function the first time, make n =4 and therefore countArray.push(4) instead of 5?

Before we even get to .push(n) the first time through it looks like we’ve already subtracted 1 from n.

at that point you call countup(4), and in that function there is again the line const countArray = countup(n-1), the function is called again.

The first time that the push method is called, n has vale of 1 as that continue again and again till the if statement is executed

Forgive me but I’m not following.

at this point the countup function is called again, as there is countup(n-1) written there

so, step 1, countup(5) is called, inside there there is const countArray = countup(n -1);, so now countup(4) is called, there is again that line, countup(3) is called, there is again that line, countup(2) is called, there is again that line, countup(1) is called, there is again that line, countup(0) is called - this time, with n < 1 being true, the line executed is return [], so now we have that countup(0) resolve as [], so for the line const countArray = countup(0), the value of countArray is []. Now that countArray has a value the next line can be executed, at this point n has value of 1, so we have countArray.push(1), and countArray becomes [1]. And that value is returned. At this point finally also countup(1) has an output. And so on.

1 Like

Ok, so I’m not understanding this so easily. How I’m reading the function is like this:

countup(5) {
    if (5 < 1) {
        return [];
    } else {
        const countArray = countup(5 - 1); //because n - 1 = 4
        countArray.push(4); //so now at this point, doesn't n = 4?
        return countArray;
    }
}

Perhaps I’m misunderstanding how the variable is changing. Because const countArray = countup(n - 1) is recalling the function itself, but countArray.push(n) is still accepting n as the start of the whole function, i.e. it is still that n = 5 at this point.

The subtraction operator produces no side effects, in other words, it does not change the values that it works on.

It’s seems that you think it works this way:

let n = 5
n - 1 // => 4
n     // => 4

But that is not the case, it’s actually like this:

let n = 5
n - 1 // => 4
n     // => 5

Right, so it seems that the else statement kind of acts like a ‘loop’. When countup(5) is called, n = 5. But when we reach the recursion statement the first time, it recalls itself with n - 1.

So, countArray.push(n) in this instance n equals whatever n equals when countup() is called again.

I understand up to this point:

we have countArray.push(1) , and countArray becomes [1]

As you have stated “And that value is returned.” due to the line return countArray; so [1] is returned.

However after that i am lost. I know that, it will go back to line const countArray = countup(n - 1) ; using Online JavaScript Compiler, Visual Debugger, and AI Tutor - Learn JavaScript programming by visualizing code. However since a value [1] has been returned how do we go back to cumputing countup(2) and getting n=2? In the return statement there is no countup(2) only [1].

countup(1) was called inside countup(2)

in that case we have

const countArray = countup(1); // so countArray is equal to [1]
countArray.push(2); // becase inside countup(2) the variable n is equal to 2
// now countArray is equal to [1, 2]
return countArray // and with this, the value returned is [1, 2]

countup(2) was called inside countup(3), so it happens the same thing, with n having value of 3
and this repeats again and again until the first function called returns a value

1 Like

Thanks @ilenia…!! Your explanation is really nice. After reading your post, I was able to figure out how the recursion is working here:

  1. Let n = 5.
    1. const countArray = countup(4)
  2. n = 4.
    1. const countArray = countup(3)
  3. n = 3.
    1. const countArray = countup(2)
  4. n = 2.
    1. const countArray = countup(1)
  5. n = 1.
    1. const countArray = countup(0)
  6. n = 0.
    1. return .
    2. Step: 5.1 --> countArray = .
    3. countArray.push(1) //Value of n in Step. 5 is 4.
    4. return [1].
    5. Step: 4.1 --> countArray = [1].
    6. countArray.push(2) //Value of n in Step. 4 is 2.
    7. return [1, 2].
    8. Step: 3.1 --> countArray = [1, 2].
    9. countArray.push(3) //Value of n in Step. 3 is 3.
    10. return [1, 2, 3].
    11. Step: 2.1 --> countArray = [1, 2, 3].
    12. countArray.push(4) //Value of n in Step. 2 is 4.
    13. return [1, 2, 3, 4].
    14. Step: 1.1 --> countArray = [1, 2, 3, 4].
    15. countArray.push(5) //Value of n in Step. 1 is 5.
    16. return [1, 2, 3, 4, 5].
1 Like