JavaScript Functions: How to Return Multiple Values

In many programming languages, functions inherently return only one value. But what if you need to return more than one value? Fortunately, in JavaScript, there are several ways to achieve this, and in this comprehensive guide, we’re going to cover them all.

Best Solution: Using Object Destructuring

Object destructuring in JavaScript allows you to unpack properties from an object and assign them to variables. This can be particularly useful when returning multiple values from a function. Instead of returning an array that needs to be accessed with indices, you can return an object and then use destructuring to access the specific properties. Here’s an example:

function calculateDimensions(length, width) {
    let area = length * width;
    let perimeter = 2 * (length + width);
    return {area, perimeter};
}

let {area, perimeter} = calculateDimensions(5, 10);
console.log(area); // Output: 50
console.log(perimeter); // Output: 30

In this example, calculateDimensions function is returning an object with two properties: area and perimeter. When we call this function, we can use destructuring to create two new variables area and perimeter, which hold the respective values from the returned object. This makes the code cleaner and easier to understand, as you can directly refer to the values by their property names instead of remembering their order in an array.

Using Array Destructuring

Array destructuring is another form of destructuring assignment in JavaScript. It allows you to unpack values from arrays into distinct variables. This can be useful for returning multiple values from a function.

Consider a function that returns an array of two values:

function calculateAreaAndPerimeter(length, width) {
    let area = length * width;
    let perimeter = 2 * (length + width);
    return [area, perimeter];
}

When we call this function, we get an array of two numbers. We could access these numbers using their indices, but with array destructuring, we can assign them to variables in a single line:

let [area, perimeter] = calculateAreaAndPerimeter(5, 10);
console.log(area); // Output: 50
console.log(perimeter); // Output: 30

In this example, the calculateAreaAndPerimeter function returns an array, and we use array destructuring assignment to unpack the values into the area and perimeter variables. The order of variables on the left-hand side matches the order of values in the returned array. The first variable corresponds to the first value, the second variable corresponds to the second value, and so on. This makes the code cleaner and easier to understand, as you can directly refer to the values by their variable names

I recommend using Object destructuring over Array destructuring. This is because the variable names are directly associated with the object’s property names, which makes the code intuitive and easy to understand.

It helps you avoid the following kinds of errors:

function calculateAreaAndPerimeter(length, width) {
    let area = length * width;
    let perimeter = 2 * (length + width);
    return [area, perimeter];
}

let [perimeter, area] = calculateAreaAndPerimeter(5, 10); // Oops. Now 'perimeter' holds the area value, and 'area' holds the perimeter value.

In the code above, the calculateAreaAndPerimeter() function returns its results in the order of [area, perimeter]. But in line 7, we catch the return value in a different order [perimeter, area]. This results in variables holding the wrong values.
So whenever possible, I recommend using Object destructuring instead.

Using Callback Functions

Not a method I particularly like, but I’ve seen this pattern used before to handle multiple return values from a function. A callback is a function passed as an argument to another function. This technique allows a function to call another function when a task is completed. Callbacks can be used to return multiple values from a function:

function calculateAreaAndPerimeter(length, width, callback) {
    let area = length * width;
    let perimeter = 2 * (length + width);
    callback(area, perimeter);
}

calculateAreaAndPerimeter(5, 10, function(area, perimeter) {
    console.log(area); // Output: 50
    console.log(perimeter); // Output: 30
});

In this example, the calculateAreaAndPerimeter function accepts three arguments: length, width, and a callback function. When the calculateAreaAndPerimeter function finishes calculating the area and perimeter, it calls the callback function with the results.