How this function is implemented!

In this example:

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 ]

I can’t understand how this function is implemented (the execution flow)
i want to know how the -n- variable is incremented from 1 to 5 !!
i understand the definition of the recursion but still wonder about the variable inside this function , maybe little info about how it works will give me some understanding.

thanks for help :slight_smile:

challenge link:
hhttps://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown

2 Likes

There have been some really good conversations about this on the forum. Here are just a couple.

1 Like

First stage: n is 5 so the if check is not valid, it goes into else block,
it declares countArray which is equal to a value it doesn t have an answer for yet(countup(5 - 1)). When it reaches that line it doesn t jump to countArray.push(n) because it has to execute countup(5-1). Keep in mind that this function invocation is pushed on a stack, execution stack and is like “pending mode”.

So in the next stage n is 4 if check fails since is not true and it jumps into else and it invokes countup(4-1) so n it becomes 3 next time all the way till if check is true. At this point you have several function stacks. Once if check is true it returns an empty array so you finally have a value for countArray constant which is an empty array.

On the execution stack, the last stack which is on top n was 1 and now that you know the value of countArray which is an empty array only now it goes further and executes countArray.push(n); The last stack in which n was 1 is popped off the stack so you have the next stack in which n is 2 so you got an array like this [1] and now it can push n in it which is 2. Then this stack it s popped off and n will be 3 and so on all the way till 5.

Think of it as a pyramid. You have n=5 then over it it s pushed countup with value of 4 (countup(5-1)) and then above it s pushed countup(3) and so on till on top of the stack n will be 1. And from there it s like reverse, you pop off the last stack which was all the way on top which was 1.

Now why in the first “iteration” when n is 5 it s doesn t execute countArray.push(n); ? Well when it reaches this line const countArray = countup(n - 1); countArray holds the value of that function invocation, when the engine sees that function invocation: countup(n - 1); it stops it doesn t go further, it s like: “Oh is see a function which is executed so I ll do it!” so it creates a new execution context which is added to the stack. At that point countArray doesn t know the value of that function invocation because it doesn t return anything and it cannot until n < 1 when will finally returns and empty array and only then when it finally returns something it can go reverse and do what you tell it do do which is pushing the values to the array one by one and return.

Recursion helps you write some clean code with few lines but is not always good. When you work with a really big amount of data, it creates so many stacks that the memory allocated for that program overflows and you get an error. This is just a side note. I know it s a lot of typing, sorry for that but try to read it several times and maybe draw some sketches on a paper or something so you can visualize better or maybe you find some sketches on google.

5 Likes

Great explanation, thank you very much!

1 Like

Now the next challenge is to solve that exercise since it requires an array in descending order :stuck_out_tongue:

1 Like

This is an exceptional explanation, thank you. I wonder why the lessons jump into something so complex without providing much of a background.

(appreciate they are free - not criticism, just feedback)

1 Like