Basic JavaScript - Use Recursion to Create a Countdown

Tell us what’s happening:
I’d like to ask what’s the deal of arr.unshift(n);. I get that if I put in 10 as the argument of the function countdown(n), each time it would reduce 1 until it stops. But how could it be .unshift() instead of .push()? If the function reduces each time and the result being stored in the array, the one step smaller number should come after the bigger number, which is how .push() works, aka add value to the end of the array. But I have to put .unshift() here to get the actual correct result. Is there some misunderstanding here?

I wish my questuion is not confusing.

Your code so far

// Only change code below this line
function countdown(n) {
  if (n < 1) {
    return [];
  } else {
    const arr = countdown(n - 1);
    arr.unshift(n);
    return arr;
  }
} 
// Only change code above this line

console.log(countdown(10));

Your browser information:

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

Challenge: Basic JavaScript - Use Recursion to Create a Countdown

Link to the challenge:

There is something called the call stack. When you call a function its gets put on that stack, and when that function is finished it pops it off the stack. Its gets a little more complex with recursive functions, because inside that function, there are other functions calls that are going to be made and tossed on top of the previous function call in the stack. So when you get to the point of the recursive function call in the original function call, its has to hang out and wait for that new function call to finish and return a value.

And when you call a function with a return value, it will return that value back to where it was called from. So when it says const arr = countdown(n - 1) that is where your original function call basically stops and hangs out while a new version of the countdown function gets put onto the stack with a new number as the argument, in this case the number 9, because n would be 10 from the original call, and 10 - 1 = 9. So the original function call has its own n with a value of 10, and the second function call has its own n, with the value of 9. It keeps making these function calls with different values of n building up the call stack till n < 1, which that is when we finally stop making function calls and get a return value of [].

And remember that the values from a function get returned back to where they where called. So after building up that call stack, it all basically collapses when we reach our base case, and all those functions will return a value back to the previous functions. So at the end when n < 1, arr will equal [], because that is the first return. Then it unshifts its local n into arr (the number 1 in this case), then returns [1]. Now in the function before that arr now equals [1] because that is where it was called from, and unshifts 2 into arr, and returns [2,1]. And it keeps doing that till the original function call, where it unshifts its n, 10, into arr which would be [9,8,7,6,5,4,3,2,1].

And that is why you use unshift rather then push.

Watch it run.

1 Like

The python tutor is really helpful!