Coders new to JavaScript will often encounter return in some functions, but not others, which leads to an inevitable question: what is return doing there, and what is it used for?

Put simply, the use of return or its absence in a function is a question of where and how the function’s output is used. return is particularly useful when the inputs are arbitrary, but the output is known. For example, calculating the result of multiplying two numbers together:

function mult(a,b) {
    return a * b;
}

var c = mult(2,7);

c will have the value of 14, since that is the result of the mult function working on the value of the two parameters supplied to it.

A Practical Example, with Stimulants

Let’s take a series of radio buttons that ask the user to choose between a serving of coffee, tea, and hot chocolate:

<fieldset id="serving">
    <legend>What would you like to drink?</legend>
    <input type="radio" name="beverage" value="Tea" id="tea">
    <label for="tea">Tea</label>
    <input type="radio" name="beverage" value="Coffee" id="coffee">
    <label for="coffee">Coffee</label>
    <input type="radio" name="beverage" value="Chocolate" id="hotchoc">
    <label for="hotchoc">Hot Chocolate</label>
</fieldset>

Below the set of radio buttons, an (empty) paragraph:

<p id="orderup"></p>

At the bottom of the page, a script:

document.getElementById("serving").addEventListener("click", (e) => {
    if (e.target.nodeName == "INPUT") {
        document.getElementById("orderup").innerHTML =
    "Now serving up a hot cup of " + e.target.value.toLowerCase() + "!";
    }
}

This works as you might expect: clicking on a radio button (or it’s associated <label>) generates a short sentence that serves up the chosen beverage, derived from the input’s value and converted to lowercase. Taking this further, let’s move the central code into a separate function with a parameter:

function delivery(e) {
            document.getElementById("orderup").innerHTML =
        "Now serving up a hot cup of " + e.target.value.toLowerCase() + "!";
}

The event listener changes to:

document.getElementById("serving").addEventListener("click", (e) => {
    if (e.target.nodeName == "INPUT") {
        delivery(e);
    }
})

The code continues to work in the same way, but all the action takes place in the function, including writing to the page. This makes changing and maintaining the code potentially difficult: we have to trace back all the way into the function in order to alter what’s being printed out.

What if we change things around: have the function determine what beverage the user is going to consume, but leave the sentence inside the event listener?

function delivery(e) {
    return e.target.value.toLowerCase();
}

document.getElementById("serving").addEventListener("click", (e) => {
    if (e.target.nodeName == "INPUT") {
        document.getElementById("orderup").innerHTML =
        "Now serving up a hot cup of " + delivery(e) + "!"; 
    }
})

The on-screen result is exactly the same as the earlier code, but it’s now considerably easier to read and maintain. The function is doing some work and returning the result exactly where we called the function from, inserting its output into that position.

Postmarks

There are a few things to note about using return in functions:

• return always provides the output of an expression. That output could be of any data type, including arrays, objects, even other functions.
• hitting return will cause a function to immediately stop execution and exit.
• if return does not have an expression, the function will stop and return undefined.
• the return and it’s associated expression must be on the same line.

Conclusion

return is extremely useful in the separation of concerns in code, and are part of making efficient, readable scripts. This is also true of anonymous functions, which we'll look at next.

Photograph by Chris Kim, used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.