Use Recursion to Create a Countdown - Understanding

[Mr.Thrash]

So i’am just trying to understand the order of this function.
This one helped a lot (by entering the given code of this exercise):
https://pythontutor.com/javascript.html#mode=display
But i’am stuck between step 14,15 and 16

After creating the empty array ( because n=0 and 0<1 ) how does the function jump over to the “else” fraction again.
I suppose this would only be possible if n>1.
The array is created and know we are back in the second part of the function ?

  **Your code so far**

// Only change code below this line
function countdown(n){
return;
}
// Only change code above this line

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36

Challenge: Use Recursion to Create a Countdown

Link to the challenge:

freeCodeCamp.org

[tioung]

first round (n=5)
first code => countup(5)=countup(4).push(5)
second round(n=4)
replace countup(4) with countup(3).push(4) in first code and you get countup(3).push(4).push(5)

until you get countup(0).push(1).push(2).push(3).push(4).push(5)
Now replace countup(0) with empty array
and you’re done.

[Diego_Perez]

@Mr.Thrash

After creating the empty array ( because n=0 and 0<1 ) how does the function jump over to the “else” fraction again.

JS uses some abstractions, stack(LIFO) and nested function calls:

• stack(LIFO)

• nested function calls:

When a function makes a nested call, the following happens:
The current function is paused.
The execution context associated with it is remembered in a special data structure called execution context stack.
The nested call executes.
After it ends, the old execution context is retrieved from the stack, and the outer function is resumed from where it stopped.

I wrote a short faq about recursion (is not the same exercise but I think is similar enough):

code

function rangeOfNumbers(startNum, endNum) {
   if(startNum === endNum) {  
     return [endNum]; 
   } else {  
     let arr =  rangeOfNumbers(startNum + 1, endNum); 
     arr.push(startNum); 
     return arr;     
   }
}

let result = rangeOfNumbers(1,4);
console.log(result);
// [ 4, 3, 2, 1 ]

1.- What happens when the base case is evaluated as false?

The function calls itself:
Steps: 4,6,8

2.- What happens when the base case is evaluated as true?

Returns an array:
Step: 10

3.- The Array, where does it come from?

From the base case:
Step: 10

4.- Why can I push startNum to arr?

Because after the base case is evaluated as true, arr is an array:
Step: 11

5.- Why I’m Getting [4,3,2,1] ?

Because JavaScript uses a “stack” (LIFO, last in first out):
Steps: 10, 13, 16, 19

6.- How can I get [1,2,3,4]?

Replace push with unshift

function rangeOfNumbers(startNum, endNum) {
   if(startNum === endNum) {  
     return [endNum]; 
   } else {  
     let arr =  rangeOfNumbers(startNum + 1, endNum); 
     arr.unshift(startNum);  // <-  here  
     return arr;     
   }
}

let result = rangeOfNumbers(1,4);
console.log(result); 
// [ 1, 2, 3, 4 ]

7.- Related topics:

• nested (function) calls
• call stack

Cheers and happy coding

Notes:

• If you know spanish, I recorded a video explaining recursion step by step:

Recursividad Paso A Paso [1/2]: "Usa recursión para crear un rango de números" , freeCodeCamp.

Recursividad Paso A Paso [2/2], "Usa recursión para crear un rango de números", freeCodeCamp.

• I also wrote a blog post (it has 27 images)

https://diegoperezm.github.io/blog/recursion.html

• Other things about recursion:

  • Recursividad: primero y resto (Spanish)

Recursividad: Primero y Resto (first and rest)

• Recursion practice using first and rest(exercises):
  Recursion Practice using first and rest (Exercises)

• Recursion practice using first and rest(solutions) :
  Recursion Practice using first and rest (Solutions)

[Mr.Thrash]

Thank you very much for your explanation
I’am going to work through this very soon.
On the first sight it seems to be the answer i was looking for.

[Mr.Thrash]

LIFO and nested function calls were exactly the missing parts which lead me to an understanding of “How and why does it work?” (: Cheers !