Recursion Countdown Stack diagram or Tree Diagram

 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 ]

Can anyone help me with the tree diagram or stack diagram of function call countup(5)
so that i can understand better how it is actually working behind scene.

Thanks

Your code has been blurred out to avoid spoiling a full working solution for other campers who may not yet want to see a complete solution. In the future, if you post a full passing solution to a challenge and have questions about it, please surround it with [spoiler] and [/spoiler] tags on the line above and below your solution code.

Thank you.

try looking at your code with this

http://www.pythontutor.com/javascript.html

It’s the question. It’s not my solution so you can remove the blur thanks

it’s the solution to the challenge. The blur is to avoid accidentally spoiling it to people that are maybe searching for hints

you can post a full working solution if you have question about it if you use the spoiler tags so that people need to manually unhide it.

I will not remove the blur, and also please avoid doing it yourself

I copied question in IDE it’s a question feel free to check

ok, it is not a solution

please next time include where you did find the algorithm

1 Like

Please can you explain following questions

  1. How variable const countArray is keeping reference of function countup(n - 1)?. Since it being called n-1 times, what is actually happening behind scene.

  2. is Global Frame = Execution Stack ? in JavaScript ES5 ?


  1. What does n(block 1)| undefined mean in the above pic?.
  2. How can we make a tree-like structure like below diagram and how should we traverse it to get the output?

this is a little bug with variables declared with let or const, it is the countArray variable - it is undefined until the function returns a value

maybe this works better:
http://latentflip.com/loupe/

frame reference the scope of the variables, global, or to which function or block it refers (like countup is the name of the local frame(s))

I think you get a tree like structure for fibonacci because of the definition
for just counting up it seems pretty linear…

countup(5) == [...countup(4), 5] == [...countup(3), 4, 5] // etc

for a fibonacci sequence, the n-th number is equal to the (n-1)-th plus the (n-2)-th number , so you get a tree like structure

countup(5) == […countup(4), 5] == […countup(3), 4, 5] // etc

Can you explain how u got 5 ? should it be …countup[4],countup[5] ? How did u resolve the value. ?

countup(5) should give [1,2,3,4,5]
countup(4) should give [1,2,3,4]
so countup(5) is also equal to countup(4).concat(5)

the 5 is the difference between the two calls output

On the top of stack countup(0) will be there and it will return [];.Countup(0) will be popped. Then on top of stack countup(1) will be there tell me how 1 is pushed in empty array [] ?

after countup(0) returns [] (so that is the value assigned to countArray), n (which has value of 1 in this case) is pushed to countArray, so now countArray is [1]

Hey thanks Magical Girl. I also found how to make a tree and travel in top-down-left right order and it gives correct explanation too.