How does using a return clause before a recursive function call differ from not using one?

Question

I was just experimenting with some recursion and noticed something that confused me. Let me illustrate with some code examples:

function loop(x) {
  if (x >=          


        

Answer 1

function count_to_3 (x) {
    x = x || 0;
    if (x === 3) { return x; }
    return count_to_3(x + 1);
}

count_to_3();

This is the same as saying something like this:

function add_1 (x) { return x + 1; }

function count_to_3 () {
    var x = 0;
    x = add_1( add_1( add_1(x) ) );

    return x;
}

count_to_3();

Each of the add_1 functions are doing their job and returning their value. The inner function gets called first -- it adds 1 to x (starting at 0), and returns its value into the next add_1, which adds one and returns it into the next add_1.

...but if you don't return the value, nothings going to happen.

With recursion, it's the same idea.

You're returning the return value of the function you're calling.

You don't need to do this.
Sometimes, recursion is about going through a tree and modifying children -- like changing every second DOM node to red, and changing the first child of every parent node blue...

There's no return value that you need there.
You just need to set up your checks, so that you don't try to recurse into infinity or end up trying to modify properties of things that don't exist.

But for cash registers or for loops where you DO want to know if a value exists, then what you're doing is the same as saying return add_1( add_1( add_1(0) ) );, assuming that add_1 returns its value.

Any function which doesn't have a return statement will return undefined (unless it's called with new, but then you get a new object, and that doesn't help you, either).

Answer 2

A function only returns the value to its immediate caller. Since in case of loop(0), the if condition is not fulfilled, return x; is not executed and the function has no other return statement, it does not return anything.

If you'd call it with loop(10) it would fulfill the condition and return 10.

In the second case, return loop(x + 1); causes loop to return whatever the other call to loop returns.

Maybe it's easier to understand with a non-recursive example:

function bar() {
    return 42;
}

function foo1() {
    bar();
}

function foo2() {
    return bar();
}

//
foo1(); // undefined
foo2(); // 42

foo1 calls bar, but it does not do anything with the return value. Since there is no return statement inside foo, the function does not return anything.

foo2 on the other hand returns the return value of bar.

Answer 3

If x<10 the loop function doesn't return any value, that' why return loop(x + 1); gives you "undefined". As soon as you reach 10, the return x; statement kicks off and you get your returned value.

The fact that you use it as a recursive function doesn't make any difference here.

Answer 4

If you don't return from a Javascript function there is an implicit "return undefined" in the end.

function loop(x) {
  if (x >= 10)
    return x;
  loop(x + 1); // the recursive call
  return undefined;
}

As you can see, te recursive call is being called and having its return value ignored. This is just like what happens when you call a function like console.log - the function gets called and runs any side-effects but you discard the return value in the end.

Answer 5

The order in which this recursive call will evaluate will be from the last call down. The function that gets evaluated first is the loop(10) which returns a value of 10. The next will be loop(9) and so on. Think about what loop(9) will look like when it is called:

loop(9) {
    if (x >= 10) 
        return x;
    10
}

loop(9) will return undefined. loop(8) will as well... and so on.

Conversely, if you return the value of the recursive call it would look like this:

loop(9) {
    if (x >= 10) 
        return x;
    return 10
}

and by the time your initial function call gets executed it will look like this:

loop(0) {
    if (x >= 10) 
        return x;
    return 10
}

I created a jsfiddle to demonstrated the point: http://jsfiddle.net/TSnxp/

Answer 6

When using the function without the second return statement, the function yields no value to the callee per definition in JavaScript returns undefined.

So using the first definition and for example loop(9):

1. 0 < 10, so we don't execute the if-clause body, but just call loop(10).
2. loop(10) returns 10, but we never use this value.
3. the function loop ends and, as no other value was returned, it returns undefined.