n is 5 so the
if check is not valid, it goes into
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
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
 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.