Reconciling Return

The return keyword and its purpose is actually fairly simple but for some reason it seems to cause beginners a lot of confusion. Even after being exposed to it by example and explanation, it can take some time before understanding really sinks in. I know this was certainly the case for me but I don’t believe it needed to be that way. Lets see if we can’t help lessen that confusion here.

Why does the return keyword seem to cause difficulty to those who are new to programming? I have at least one theory as to why this is the case. Most tutorials for beginners usually start with teaching how to display results with simple functions like alert() (more so at least when I was learning in the dark ages where you couldn’t escape the horror of document.write() either) or more recently with the ever present console.log().

What these functions do is immediately display some visible result or output, assuming you’ve got your developer tools open for console.log() at least, that is. I believe this leads beginners to assume that the point of a function is to display output of some kind. Obviously the goal of any programming with a user interface is to ultimately display some form of output. Essentially programs take some form of input data, do some processing and then affect some sort of display with an  output result. But note that before we have an output there is there is usually the processing stage. What this means effectively is that some functions will perform some calculations of some kind and then return the result of their work to another function who finally displays an output. Or to another function who then does further processing before passing it on to the next function.

Let me borrow from the wonderful Eloquent Javascript

Functions can be roughly divided into those that are called for their side effects and those that are called for their return value. (Though it is definitely also possible to have both side effects and return a value.)

Lets look at a simple example:

var x = 5;
alert(x); // called for its side effect
console.log(x); // called for its side effect

//define an add function
var add = function() {
    return 5;
}

// define another function we will use later
function doMore(rv) {
    var furtherValue = rv + 10;
    return furtherValue;
} 

add(); // called for its return value

// but where does add() return the value to?
// nowhere at this point
// well, actually it will show up in your console if its open
// but thats only a convenience for testing purposes and serves
// no further purpose in an actual program

// so we could return the value and store it in a variable
var returnedValue = add(); // returnedValue holds 5 

// then pass that variable to an alert function
alert(returnedValue); // alerts 5

// or pass it to our doMore function for further processing
var more = doMore(returnedValue); 

// then pass THAT variable to an alert
alert(more); // 15

The alert and console.log functions are called for their side effects: they place text into an alert box or print a line to the console, respectively. The next function add, is called for its return value.

It is no coincidence that the second is useful in more situations than the first. Functions that create values are easier to combine in new ways than functions that directly perform side effects.

When a function returns a value it must return it somewhere or else it won’t be of any use to us. If we return a value into thin air it is lost forever. If a mother hears her baby utter its first word while the father is away, then the father misses out on hearing it. If the mother has a recording device and captures the event, she can then play it back to her husband later so he can hear it. Its as if she put the baby’s first word into a variable which she can then pass on to the husband later (or any other person who wants to hear it for that matter).

There is really nothing mysterious about return. It’s only confusing if you inadvertently come to expect functions to always display some output immediately to the user; and this is likely to happen if you’re initially hammered over the head with alerts and console.logs.

Remember that a function always returns a value. If you don’t explicitly tell it what to return, it will return undefined by default. So even a simple call to an alert function will return undefined. You can see this if you test it in your console.
To be continued…