JavaScript How to Return Multiple Values? (Examples & Theory)

By /

The easiest way to return multiple values in JavaScript is by returning an array of multiple elements.

function getVals() {
    return [val1, val2]
}

Then, you can access the returned values like this:

let values = getVals()

let first = values[0]
let second = values[1]

If you were looking for a quick answer, then there you have it!

But to write clean code, the above isn’t always the best way to return two values. Instead, you can return “labeled” values by returning an object.

This guide teaches you how to return multiple values in JavaScript in a couple of ways.

Returning Multiple Values in JavaScript

In JavaScript, you have probably written a bunch of functions that return a single value. For instance:

function sum(a, b) {
   return a + b
}

But what if you want to write a function that returns multiple values?

Solution 1: Return Multiple Values in an Array

A naive yet simple way to return multiple values is by returning the values in an array.

For example, let’s create a function that returns the sum and the product of two numbers:

function sumMul(a, b) {
   return [a + b, a * b]
}

Now, when you call this function, you need to store the returned array into a variable and then access the two values.

let results = sumMul(2, 5)

let sum = results[0]
let mul = results[1]

console.log(sum, mul)

Output:

7 10

Also, thanks to the latest updates in JavaScript (ECMAScript 6), you can restructure the return value more intuitively.

So instead of storing the returned value into a variable and then one by one picking the values from it, you can use shorthand. Here is how:

let [sum, mul] = sumMul(2, 5)

console.log(sum, mul)

Output:

7 10

This code looks already more understandable.

But there is another way to return multiple values, which is even more intuitive and maintainable.

Solution 2: Return Multiple Values in an Object

Instead of returning the values in an array, you can place them inside an object and label the values. This makes it easier and more intuitive to access.

Let’s re-write the sumMul function in the previous example to employ this strategy:

function sumMul(a, b) {
   return {
       sum: a + b,
       mul: a * b
   }
}

If you now call this function, there is a more intuitive way to access the returned values:

let result = sumMul(2, 5)

let sum = result.sum
let mul = result.mul

console.log(sum, mul)

Output:

7 10

As you can see, now you can reference the return values by their name. This makes the code more readable and less error-prone. Now it’s harder to accidentally mess up with the values as they are labeled clearly.

Wrap Up

Today you learned how to return multiple values from a function in JavaScript.

To recap, there are two ways to do it:

  • Return an array of multiple values. This is the most obvious and straightforward way. However, it lacks readability as you need to refer to the returned values by index.
  • Return an object with “labeled” values. This approach requires slightly more code but is the most reliable. By labeling the return values, it’s hard to mess things up. This is because you can refer to the returned values by their names.
Scroll to Top