Basic JavaScript - Use Recursion to Create a Countdown

[fernandez2017]

function countdown(n) {
  if (n < 1) {
    return [];
  } else {
    const arr = countdown(n - 1);
    arr.unshift(n);
    return arr;
  }
}

So I understand what the code is doing and got it to run. However, I am still confused on how the numbers are stored and displayed with unshift. Can someone explain to me why the numbers are displayed 5->1 and not 1->5? Also, can someone walk me through a scenario of each line for example if n was equal to 4?

[anon42932716]

Hello @fernandez2017 !

I found this great article in FCC News category that explains how Recursion works, and has examples.

I hope you find it as useful as I did.

How to Understand Recursion in JavaScript

Happy coding!

[opudoprince]

Hey @fernandez2017
The article @anon42932716 has linked above is great I suggest you take a look at it ,but just to explain the problem above .
Recursion means repetition,thus recursive function is a function that calls it self until a certain condition (base case) is met at which point the function can no longer execute and therefore stops running An that’s the first condition above

@fernandez2017

if (n < 1) {
    return [];

This tells the function to run until the value of n is less than 1.if it is less than 1 return an empty array. if the value is greater than one it will still call itself by subtracting 1 each time from the value of n passed in which is the else block

@fernandez2017

const arr = countdown(n - 1);
    arr.unshift(n);
    return arr;

Note:arr.ushift() is array.prototype method that adds an item at the beginning of an array unlike the array.push() method which adds an item at the end of an array.

Now when you pass a value such as 5 to the function,it check if 5 is less than 1 if not it returns 5 the function substracts 1 from 5(n-1).
the value of n is now 4 the function checks again if 4 is less than 1 if not it returns 4 Then 1 is subtracted from 4.This continues until the value of n is 0,it checks for (n<1) at which point it terminates since 0 is less than 1 then it returns the arr =[5,4,3,2,1]
Recursion is not an easy concept to grasp but with a lot of practice it will begin to sink in.
Happy coding!!

[bbsmooth]

@fernandez2017

Can someone explain to me why the numbers are displayed 5->1 and not 1->5?

@fernandez2017

const arr = countdown(n - 1);
arr.unshift(n);

After the first line executes, the value of arr will be an array, since the countdown function always returns an array. And what does unshift do to an array? It adds a value to the beginning of an array. So if you call it as:

countdown(5);

Then the first line will set arr to the array created by countdown(4) and then you will add 5 to the beginning of that array (because of the unshift) and thus 5 will be at the beginning instead of the end of the array.

// Set the variable arr to the array 
// returned by countdown(4)
const arr = countdown(4);
// This adds 5 to the beginning of the array
// stored in the variable arr.
arr.unshift(5);

[fernandez2017]

Thank you for the reply, so I understand the “const arr countdown(n-1)” function repeatedly checking if n < 1 , however, Where i am confused is when I see “arr.unshift(n)” with the first value checked as “5”, then “4”, then “3” and so on, if unshift add values to the front of an array and we add values in the order of: 5…4…3…2…1 shouldn’t each unshift check add it like: 1…2…3…4…5 since “1” is the last value so I would expect it to be at the front of the array? Thats where I am confused?

[bbsmooth]

Look at my example again. If you call the function as countdown(5) then since n is not less than 1, the function will execute the code in the else block. Let’s put the actual values in there:

const arr = countdown(4);
arr.unshift(5);
return arr;

The call to countdown(4) is going to return an array because the countdown function always returns an array. Hopefully you agree. Even if you aren’t sure at the moment what the array being returned by countdown(4) looks like, it is an array. And so the next line will add 5 to the beginning of that array. So I hope you can see that the array arr returned from the else block will have 5 at the beginning.

I think maybe you are having trouble understanding what is being returned by countdown(4). Well, we know that countdown(5) will return an array with the first value being set to 5. So what do you think countdown(4) will return?