Javascript Calling Versus Returning Functions

Question

Before I get to the meat of my question, here is the code that goes before the area in question.

function arrayToList(array) {
  var list = null;
  for (var i = array.length - 1; i >= 0; i--)
    list = {value: array[i], rest: list};
  return list;
}

function listToArray(list) {
  var array = [];
  for (var node = list; node; node = node.rest)
    array.push(node.value);
  return array;
}

Now, can someone explain the difference between calling a function and returning a function. When I call my function, I get undefined for my result. However if I return my function, the answer is correct. Can someone explain to me the difference between the two?

With the return:

function nth(list, n) {
  if (!list)
    return undefined;
  else if (n == 0){
    return list.value;
  }
  else
     return nth(list.rest, n - 1);
}

Without the return:

function nth(list, n) {
  if (!list)
    return undefined;
  else if (n == 0){
    return list.value;
  }
  else
     nth(list.rest, n - 1);
}

Thanks for your help!

Answer 1

If you don't return anything then the variable awaiting the function call will be undefined. When you return a function call you are returning the result of that execution. When you just execute the function you are not returning the results of that execution. Let me show you an example: Fiddle

IF you are trying to return a function to be called later, than can be done too, but you need to return the name of the function without the parenthesis. See here: Fiddle

Here is the full code sample with everything mentioned above:

function doWork(){
 writeResult('doWork Starting');
 return 1;   
}

function myFunctionWithReturn() {
    writeResult('myFunctionWithReturn Starting');
    return doWork();
}

function myFunctionWithoutReturn(){
    writeResult('myFunctionWithoutReturn Starting');
    doWork();
}

function myFunctionWithFunctionReturned() {
    writeResult('myFunctionWithFunctionReturned Starting');
    return myCallback;
}

function myCallback() {
 return 'Callback was called!';   
}


function writeResult(message) {
 document.getElementById("result").innerHTML += "</br>" + message;   
}

writeResult('Starting with return first...');
var result = myFunctionWithReturn();
writeResult('Result: ' + result);
writeResult('Now doing without return...');
result = myFunctionWithoutReturn();
writeResult('Result: ' + result);
writeResult('Now doing returning a function to call later...');
result = myFunctionWithFunctionReturned();
writeResult('Result: ' + result);
writeResult('Now calling the function that was returned...');
result = result();
writeResult('Result: ' + result);
writeResult('Done.');

<div id="result"></div>

Answer 2

In the second snippet, nothing is returned in the else branch. You recursively call your function. The function will return a value, but only to its calling self. The value that is returned is discarded and the end result is that nothing is returned to the place when the function was originally revoked.

In the first (working) snippet, the return value is passed on and on and on to the outer layers of the recursion.

By the way, in neither case do you 'return the function'. In both cases you call the function, but in the first case you also return its return value (passing it on to the caller), while in the second case the return value is ignored.

Below a version with separate functions, which is maybe more clear than this recursion.

function h() {
  return "Hello world";
}

function a() {
  return h(); // Calls h() and returns the value that was returned from h() to the caller.
}

function b() {
  h(); // Also calls h(), but does nothing with its return value. b() itself returns nothing.
}

alert("a returns: " + a()); // Hello world
alert("b returns: " + b()); // Undefined