JavaScript Return Multiple Values

Table of Contents

It is possible to return multiple values form JavaScript functions, but those values have to be wrapped inside some sort of container. So in reality you are only returning one value, but that is a container that holds multiple values.

In most cases, returning multiple values is the wrong thing to do. If you find yourself wanting to return more than one result then you should consider redesigning your code to make things less coupled.

There is an example at the end of the post how you might break up the examples that we go over below. Most of the time people who are new to programming want to return multiple things from a function, but you should try not to. First check out how you can achieve it, but also make sure to read the section on how to improve on your code.

Returning multiple values from function

Let us start by looking at a few ways we can return multiple values from a JS function. There are basically two ways that we will explore, the first one is using an array as a container, the second is to use an object.

1. Return multiple values from a function using an array

Perhaps one of the easiest ways to achieve this is to use an array. If you wrap your values inside an array then you are effectively returning only one object, which is perfectly legal. The cumbersome part of course when assigning the values that come back to variables.

Lets see how we can do it.

function returnMultipleValues(a, b){
    var sum = a + b;
    var dif = a - b;
    var average = (a + b) / 2;
    return [sum, dif, average];
}

console.log(returnMultipleValues(10, 30));

I want to point out that if you should change your code if you want to return multiple values like above. It is bad design and very coupled. In the instance like above you want to create one function for each of the computations. That way, you can reuse the functions later if you need the same functionality.

If you copy the code from above into the console you should see the following output.

Returning multiple values from a js function by using an array

2. Return multiple values from a function using an Object

Perhaps a neater way of returning more than one value is to use an Object. The reason is that you have key value pairs, where the key is more descriptive than an array index. As with using an array, if you are wrapping your multiple values that are not really related into an object then you should redesign your code.

function returnMutlipleValues(c, d){
    var results = {};
    results["sum"] = c + d;
    results["cLargest"] = c > d;
    results["average"] = (c+d) / 2;
    return results;
}

console.log(returnMutlipleValues(5, 10));

Running the code above in the console produces the following output.

Returning multiple values from a function using an Object

You should now be able to return multiple values from a function. If you don’t have a specific reason for why you want to do it this way, then you should read the next few sections of this post as well.

Should you return multiple values to begin with?

Even though it is possible to return multiple values from a function using the techniques we discussed above, it is really not something you should do.

If you find yourself wanting to return multiple values then those values are typically only vaguely related at best. It is common that you might produce some intermediary values in your quest to compute some value or create some object, but wanting to return those values as well from a single function is not the best design. You are better off creating functions that take you one step closer to your end goal and then calling the functions individually. This produces code that is easier to read, maintain, and most of the time produces less bugs.

What you should do instead

If we continue with the code example from above, lets change the code to how I would advice that you do it instead. I know these calculations are very simple, and you can do them all in one line and don’t need a whole function for them, but they are to illustrate the concepts.

So instead of having one function return the sum and the average of a series of numbers, we are going to create individual functions for each of them.

function sum(array){
    var total = 0;
    for(var i = 0; i < array.length; i++){
        total += array[i];
    }

    return total;
}

function average(array){
    var total = 0;
    for(var i = 0; i < array.length; i++){
        total += array[i];
    }

    return total / array.length;
}

console.log(sum([1,2,3,4,5]));
console.log(average([1,2,3,4,5,6,7,8,9,10]));

This is a lot cleaner and easy to maintain than having one function that returned both the sum and the average.

If you copy the above into the console you would see the following output.

Instead of returning multiple values you should break it up into multiple functions

If you liked this post and want to learn more about JS then you can check out this guide on how to get the current URL using JS and this on using JavaScript to get input.

Related Guides