Recursion function syntax question

1

I don’t understand why I need the “return” in the if statement inside the function.
Doesn’t the code just call the function again if I leave it out?
It doesn’t work if I leave it out. I just don’t understand how things work in that one spot in the code. I am OK with the concept of recursion, in general, using a while loop or a function. But, I just would like an explanation about why I need that “return” to call the function again. I am not returning anything at that point. I am passing the string back into the function. Does the “return” sort of cause the code to go out of the function, and call it from the outside, whereas, if I don’t have that “return”, it is calling the function again from inside the function?

function addTo(str){
   if(str.length < 50){
      str = str + "...but getting longer";
      return addTo(str);  // Why do I need the word "return" here? Isn't the code just calling the function again?
   }
   else{
      return str;
   }

}

var strNew = addTo("This is small.");
console.log(strNew + " = new string");
2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

3

Thanks, ArielLeslie.

4

I am going to take a stab at answering this and let me know if I should try again :slight_smile:

I believe it goes to

You are not returning anything when you call the function again, but once your string is over 50 characters you following the recursion all the way back through each instance returning the result all the way back.

So for instance:
First call we will call addTo1, it is shorter then the requested length so it will make another call that I will call addTo2, again that is short so it goes to call again which I will call instance addTo3. This continues until it is the right length. Once it is the right length it returns everything back all the way through, so addTo3 would return the str to inside of addTo2. Then addTo2 would return the str to inside addTo1, and addTo1 would return to the original call and assign it to the var strNew.

To avoid this you could technically reformat your code to look like this:

var strNew = "This is small.";

function addTo(){
   if(strNew.length < 50){
      strNew = strNew + "...but getting longer";
      addTo();  // No return because you have using a global variable and not passing one around.
   }
}
addTo();

console.log(strNew + " = new string");

But the above is not likely something you will use, I imagine stackoverflow would have an explosion with that example :slight_smile:

Hopefully that helps and if not I can certainly try again.

5

Thanks, Timothy. Yeah - I didn’t post this to StackOverflow because it would get attacked. I remembered that this forum is much better with simple questions about how things work. Thanks for your example code.

6

You are returning something, you’re returning the function. If you don’t return anything the return value will implicity be undefined (you get round that with the code shown above, which is a totally fine way to do recursion, as long as it’s wrapped in another function, should not use globals. JS (as with all languages) works by evaluating things to values. If you return a function, JS will attempt to resolve that to a value. It can’t, it’s a function, so it has to execute the function. Now if the exit condition is false, the function is returned again, can’t evaluate that so it gets executed again and so on. If exit condition is true, the value can be resolved, so JS will evaluate that and then go backwards through the stack of functions that have built up.

1 Like
7

Thank, Dan. So, the code I am using just keeps calling the function without resolving it. I just watched a video that mentioned how JavaScript uses the stacks with functions. Maybe I need to go watch it again and pay closer attention. I appreciate your answer and explanation.

8

To see exactly what is happening I would suggest running this code:

var rec = function( data, count ){
 console.log("Rec #"+count+" started...");
 if(data.length<10){ 
       return rec(data+".",count+1);  
    }
console.log("Rec #"+count+" finished and returned: "+data);
return data;
};

You could also do this without the return in the if statement like this:

var rec = function( data, count ){
 console.log("Rec #"+count+" started with data: "+data);
 if(data.length<10){ 
       data = rec(data+".",count+1);  
    }
console.log("Rec #"+count+" finished and returned: "+data);
return data;
};

rec("rec",0);

I hope that will make it a little more clear. Recursion can be very confusing, using console logs will help a lot when trying to understand them.

9

Thanks, Josh5231. I did run the code, and I did some addition coding on my own to try to get an idea about how this works.