Need help with javascript function recursion

[WyattMcLaren]

Hi!

I was doing the last excersice in the first block of javascript basics.

I wrote this code and it passed but i would like to know why.

function rangeOfNumbers(startNum, endNum) {
if (startNum === endNum) {return [startNum];
} else {
     var range = rangeOfNumbers(startNum, endNum-1);
     range.push(endNum);
     return range;

 }


};
console.log(rangeOfNumbers(1,5));

• In case the first condition passes, the function terminates

• In case the first condition is false it continues with else decrementing endNum by 1, pushing it to range and returning range

• When endNum is decremented to startNum the first condition should pass and the function should return [startNum]* and terminate.

It should eventually come back to the first condition and should print out [1] in case it is called with (1,5) for instance.

I think there is a flaw in my understanding of how this works.

When the first condition fails, then the complier moves to else and exectutes it and never reevaulates the first if again ?

But then how does the function know when to terminate?

Also i have [ 1, 2, 3, 4, 5 ] printed out. Why isn’t it [5,4,3,2,1] ? It takes the second number, substracts one from it the pushes it to the end of the array, and again -1 -> to the end, etc. so at first I was expecting it to be the other way.

Can someone explain this to me, please?

Thank you!

Browser info

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

Challenge: Use Recursion to Create a Range of Numbers

Link to the challenge:
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers

[YgorSilva]

So, let’s try to break the recursion down for the simplest case possible and then generalize it. Let’s say we call rangeOfNumber(1,2):

• First, it would enter the if statement and since startNum = 1 and endNum = 2, it would fail
• Then, it would go to the else statement and make the recursion call, so, range = rangeOfNumbers(1,1). While the recursive call is being executed, the execution of the original call is pending.
• Now looking at the execution of rangeOfNumbers(1,1), we can see that the if statement evaluates to true. So, it returns [1]. That’s the base case, when it returns a value that doesn’t depends on another recursion call.
• After executing the recursion, range.push(endNum) is called. So, it’s taking the array [1] and pushing 2 to it. Finally, it returns range (which is equal [1, 2] at this point).

I believe now generalizing to other cases should be easy. Imagine a simple case still like rangeOfNumber(1,3). You already know what rangeOfNumber(1,2) returns and the why of it, then it shouldn’t be hard to see what would happen in this case.

Recursion is a pretty straightforward concept and many of us struggle with it. It’s hard to understand and even harder to explain, so if I made things even fuzzier for you, I’m sorry. But don’t give up. Keep studying and practicing, maybe read some articles, watch some tutorials, and you’ll get there.

Hope I’ve helped.

[snigo]

There is no special structures or procedures involved with recursion, it’s simple execution of the code line by line according to precedence:

Operator precedence

Take a look at this line:

var range = rangeOfNumbers(startNum, endNum-1);

Here you’re assigning to range variable a function call. Now, function call has very high precedence, whereas assignment very low, meaning that JavaScript would first calculate the result of rangeOfNumbers(startNum, endNum-1) and only then assign it to var range.

[WyattMcLaren]

Thank you guys.

I’ve figured it out eventually.

Basically it returrns the modified values to the function itself and creates a stack of values as long as the first statement is fulfilled and then executes the stack backwards.
So it returns startNum when if is fulfilled, then exectues else with 2 and then with 3. It unwinds the stack historically backwards, so to say.
I’ve drawn down the process - it is a little wonky but maybe will help someone reading this post in the future.