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

JavaScript
1

Tell us what’s happening:
why the array is [1,2,3,4,5] rather than [5,4,3,2,1]

Your code so far


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

Your browser information:

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

Challenge: Use Recursion to Create a Range of Numbers

Link to the challenge:

2

If you want me to return [5,4,3,2,1] you have to use unshift and not push

3

Recursion is difficult to understand at first - it’s weird. I might recommend looking at some youtube videos, etc. to get an idea - sometimes visual helps. Look at as many sources as possible explaining it in as many ways as possible.

As to an explanation, why they are in that order…
When the function is called (assuming we’re not at the end), the var array = rangeOfNumbers(startNum,endNum-1); gets called. I know that the array.push(endNum); is right after that, but it isn’t called yet. No, we had another function call on the line before, so this function call gets left on the stack and a that new function call takes over. This keeps happening until - we keep starting the functions, but not finishing as we call the same function and we keep pushing those onto the call stack. Finally, we reach the final, terminal case which is the first one of these calls that finish. As that finishes, it looks on the call stack to see what was left over and grabs the most recent (that’s why it is a stack and not a queue), so that is the one that runs the push first. It may have been run last, but it is the first to complete. And that function call finishes so JS grabs the next most recent off the stack, and so on and so on, the stack or recursive calls unravel, in the opposite order of what people would expect. The last recursive call is the first to complete and the first call is the last one to complete.

1 Like
4 
var array = rangeOfNumbers(startNum,endNum-1);
  array.push(endNum);

It is hard to understand.when startNum==endNum, get[1] then how to get the last elments?

5

when you use array.push(endNum);
remember the last element for endNum is 1, so if you use push this will enter it as the first element, then for the next value endNum = 2 the push enters this to the last element then it would have [1,2] and so it would continue to the end, but if you add
array.unshift (endNum);
What it does is add it to the first element, so it would no longer be [1,2] but [2,1]

6

Nothing is really “gotten” until the last case runs. The function just keeps getting called with smaller ranges, (1, 5), then (1, 4), etc. Until it is called the fifth time with (1, 1). Then that if statement is true. That’s where the unravelling starts to happen.

I really think recursion is hard to explain verbally. I think a visual explanation is better, so a video (or many) might be better. I’d studied recursion and never really understood it until one day I was playing with the pagoda puzzle in my house and it struck me - I was solving it with recursion. That helped make the concept sink in, even if implementing it on computers is weird.

Don’t get frustrated. Recursion is weird. To be honest, I think too much emphasis is placed on recursion. It comes up with “sexy” solutions, but usually an iterative solution is often faster and smaller. In 7 years of dev work, I’ve only written on recursive function. But they are good to know because certain problems (like traversing a large tree, which was the problem I faced) just make sense with recursive solutions. And they show up on interviews sometimes. But don’t get frustrated - they are weird and can take people a while - that is completely normal.

4 Likes