Solved recursion problem but need some help understanding why it works

JavaScript
1

Hi, I solved this recursion problem but I am specifically confused about HOW the values end up inside the array. I understand that the functions ‘stack’ until they hit the base case. But when the function returns the [endNum] what is happening with the ‘stacked’ function calls that push the endNum’s to the array? How does using push on the const ‘list’ result in numbers in the array?

Thanks for any help!

Your code so far


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

console.log(rangeOfNumbers(1, 7));

Your browser information:

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

Challenge: Use Recursion to Create a Range of Numbers

Link to the challenge:

2

the first time this is called
inside this there is

rangeOfNumbers(1,6) return [1,2,3,4,5,6], then 7 is added at the end, and [1,2,3,4,5,6,7] is returned

how do we get that rangeOfNumbers(1,6) return that?
inside it there is

rangeOfNumbers(1,5) returns [1,2,3,4,5], 6 is added at the end and [1,2,3,4,5,6] is returned

you can continue like this until the end

in reality when the function has a function call inside, the execution is suspended until that second function will give an output, so there can be a lot of functions waiting for something before being able to continue

where they wait is called “call stack”, and if there are too many functions waiting it is possible to have a “stack overflow error”, and the execution will stop - it is important that your recursion does not take too many cycles, or it will not be able to finish

3

Hi,

If I get stuck visualizing it, I always go to this site.
Python Tutor - Visualize Python, Java, JavaScript, C, C++, Ruby code execution

Hope it helps you visualize it.

4

Thank you for linking me to that site.

5

I’m sorry but I really don’t understand what you are trying to say. How does the original array from the if statement end up in const list? When I look at the code all I see is the if statement returning (in this case) [1].

6

the if statement calls the function again, so list is an array that comes from that function call (which is the same function but with different arguments)

inside rangeOfNumbers(1,2) you have const list = rangeOfNumbers(1,1)
so in this case list is equal to [1]
then the 2 is added and it becomes [1,2] and that is the output of rangeOfNumbers(1,2)

7

Each function call is separately executed.

It helps me to mentally replace the function call with its result.

For example

//...
    const list = rangeOfNumbers(1, 7 - 1);
    list.push(7);
    return list;
  }
};

becomes

//...
    const list = [1, 2, 3, 4, 5, 6];
    list.push(7);
    return list;
  }
};

The function rangeOfNumbers(start, stop) always returns an array with the numbers from start to stop, and the function cannot continue until the line with the recursive function call finishes.

8

Oh okay. Thank you! It is definitely a tricky thing to understand but that helps a lot.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.