Understanding recursion

JavaScript
1

Hello! I have a pretty small question but its boggling me because I need to understand how its working exactly. On my current lesson in freecode camp this example was presented to me:

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

Now after watching some youtube videos and reading up google results, I have a slightly better understanding of whats happening. The function does something, and then it calls itself and repeats the function and would otherwise be infinite, except that the base case helps to prevent it from doing so. In one example i found on youtube, it went like this:

private static void sayHi(int count) {
System.out.printIn("Hi!");

if (count <= 1) {
 return;
}
sayHi(count - 1);
 }
}

Now in THIS example, I can understand whats happening. The base case will eventually reach one and the function stops. But there’s another thing: I can clearly see that sayHi is being called again in the else statement just how someone may call a function normally.

But in the project that FreeCodeCamp provided, it calls the function in a different way. It calls it with const countArray = countup(n - 1); And thats super weird to me because I’m not sure how that’s working. Is it common to call a function by declaring it as a value to a new variable? And does it function differently? Is it being called in a different way or under different mechanics than just calling it normally? What exactly is happening here and why was it called this way

2

Let’s pretend we have a function sum that adds the two numbers passed into it:

const total = sum(1, 2);

The value of total would be 3. In other words, the variable total is assigned the return value of the function sum. That’s all that is happening with

const countArray = countup(n - 1);

Since the countup function always returns an array, then countArray will be assigned that return array.

If you want to understand what is happening here, why don’t you write out what happens if you execute the following:

countup(1);

Literally take us through the function one line at a time and explain what will happen.

3

I’m not exactly sure because when the base case is reached, it does return an array. But just looking at the code, since the base case isn’t reached (the base case is false) it shouldn’t return an array yet.

But if i run it with the number 1, it returns an array with 1.

Idk how the 1 got INTO the array because it doesn’t have instructions to put n into the brackets, but i’m not good at javascript yet so i’m still learning LOL

edit: nope i see it now, it runs the 2nd part and pushes that into the array because the base case isn’t reached until it hits zero, whoops

4

UPDATE: Sorry, I read that wrong, I thought you said it doesn’t return an array. My bad.

Again, don’t just tell us what countup(1) will return, we already know it. Go through the function line by line as it would execute and describe what is happening on each line.

5

Ok let me try. If you run countup(1) the base case fails and it creates a new variable called countarray which is countArray

Then the 2nd instruction pushes the 1 into the array so its:
countArray[1]
Then it returns countArray. Idk what that line means, “return countArray”. Its not a function. So yea idk what happens at this particular line, what does return countArray do

1 Like
6

BTW, whenever you want to refer to code in here, wrap the code in single back ticks if you want to do it inline or triple back ticks if you want to make it a code block. Or you can use the </> button on the editor tool bar.

This line:

return countArray;

Is a return statement which immediately ends the function and returns the value in the return statement. So in this case it causes the function to return the value in countArray, which is an array.

In the sum function I mentioned earlier, it would have a return statement of something like:

return firstNum + secondNum;

The return statement is how the function gives us the value we are expecting when we call the funciton. It wouldn’t be much help if we called sum(1048038140198, 02139402024350) to get the sum of those two numbers but the function didn’t return the sum to us :slight_smile:

7

This is not quite correct. countArray and countArray[] are not the same thing.

You are correct that countup(1) does skip the if block (base case) because n is greater than 0. So it executes the first line of the else block:

const countArray = countup(n - 1);

And if you replace n with the actual number then you get:

const countArray = countup(1 - 1);

Or

const countArray = countup(0);

So my question is, what does countup(0) return? And then what would the variable countArray hold?

8

hmm

countup(0);

would return empty brackets :

[]

countArray would be holding [1] inside of it. But those seem to be two different seperate things, I think. Sorry if i’m not formatting the text properly i’m trying

9

Correct, countArray would be holding an empty array after this line:

const countArray = countup(n - 1);

Then what happens on the next line?

countArray.push(n);
10

then countArray.push(n) would push the value of n into the countArray making it countArray[1]

11

Correct, it pushes 1 into the empty array held by countArray. And then the next line:

return countArray;

Returns the value [1] since that is what is stored in countArray.

So you have just figured out what countup(1) returns. Now explain what countup(2) returns. Again, go through it line by line just like we did with countup(1). No shortcuts. And remember, you already know what countup(1) returns.

12

Notation note - countArray[1], countup(1), and countArray = [1] all mean different things.

13

ok i’ll try

So countup(2); would start, proceed to the base case or if statement if (2 < 1) and fail.

Then, a new array is created named countArray which seems to have 2 values. The first is countup(1) but also it exists on the side as countArray[]

Then, countArray.push(2) makes it into countArray[2]

and it returns. Exactly what it returns isn’t clear because it feels like *both * countArray[1] and countup(1) exist at the same time.

I would assume it returns countup(1)

Then this also fails the base case, proceeds to the else statement and redefines countup(1) into countup(0)

At the same time, it pushes 1 into the array making it countArray[1, 2]

And now it returns countup(0)

Then countup(0) succeeds in the base check, and returns []

Or at least, i assume it should return [] because i’m not sure how the array countArray[1, 2] is transferred up into the base case return. (if that makes sense)

14

This isn’t what you mean to say! countArray[2] refers only to the element of countArray at index 2. It DOES NOT mean that countArray = [2]!!!

I think this is where your understanding is failing. What does “exists on the side” mean?

15

well inside the countup function it has this part here:

const countArray = countup(n - 1);
countArray.push(n);

It looks to me like its creating a new local variable, an array, called countArray. And then its pushing 2 (or whatever n is) into the array, creating that array. During all the iterations of the function, this object seems to be saving the numbers one by one, so it feels like it exists as a local object inside the function

16

I asked you to go through this line by line for a reason. So let’s look at the first line of the else statement:

const countArray = countup(n - 1);

You need to replace n with its actual value, which is 2, so that turns into:

const countArray = countup(2 - 1);

Which is

const countArray = countup(1);

We already know what countup(1) returns, right? So what is the value of countArray after this line executes?

17

I think its countArray = [1]

1 Like
18

There is no “thinking” involved here :slight_smile: You already know the answer because we already figured out above that countup(1) returns the array [1].

So after that line executes, the value of countArray is [1]. So what happens on the next line:

countArray.push(n);
19

This part is confusing. Now i’m a little more than confused maybe.

It seems that it pushes 1 into it again?

countArray = [1, 1]

?

20

Remember, we called the function as

countup(2);

So what would the value of n be here?

countArray.push(n);