 # 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)` ?

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?

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

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.

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 ``. 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 ``

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

However after that i am lost. I know that, it will go back to line ` const countArray = countup(n - 1) ;` using http://www.pythontutor.com/javascript.html#mode=edit. However since a value  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 .

`countup(1)` was called inside `countup(2)`

in that case we have

``````const countArray = countup(1); // so countArray is equal to 
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 @ieahleen…!! 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 .
5. Step: 4.1 --> countArray = .
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