Return several values from a JavaScript function

A simple and quick article today to answer a specific question in addition to the previous article: How to return several values from a single function in JavaScript?

The short answer is : “it's not possible”. But as you know, if it's a real need, developers find a way to do it. And, that is what we are going to explain in this article.

Wrap multiple values into another

As we saw above, we cannot return multiple values at the same time. The reason for this is that we are returning values using the return statement. This statement can only handle one value at a time, and we can only use one return statement per function (the second and following ones being part of dead code).

But there are values that can contain other values, such as arrays or objects for example. Returning an array of value or an object created just for the occasion as seen below will therefore be our solution to circumvent the limitations of JavaScript.

function returnSeveralDataInArray() {
    const data = ['valeur 1', 2]
    
    return data
}

function returnSeveralDataInObj() {
    const data = { one: '1', two: 2}
    
    return data
}

These two options allow you to retrieve several values at once either by knowing their order in the data structure or by knowing their name.

const data = returnSeveralDataInArray()
const datum1 = data[0]
const datum2 = data[1]

const data = returnSeveralDataInObj()
const datum1 = data.one
const datum2 = data.one

The Tuple type in TypeScript

The TypeScript developers have tried to structure the cases (like this one) where we need to gather certain values for precise and often time-limited use. They added a new type to the language: tuples.

The dictionary describes a tuple as “a data structure consisting of several parts”. It is a bit vague, but the TypeScript documentation adds:

A tuple type is another sort of Array type that knows exactly how many elements it contains, and exactly which types it contains at specific positions.

So, just like our arrays resembling the data we want to return all at once. Look at the TypeScript equivalent of the previous examples:

function returnSeveralDataInTuple(): [string, number] {
    const data: [string, number] = ["valeur 1", 2]
    
    return data
}

const datum1: string = data[0]
const datum2: number = data[1]

Overall, it's just an array like the one we used in JavaScript, but here TypeScript is going to make sure that you only pass two values into that array. It will also check that the character string is in the first position and the number in the second.

Furthermore, the function signature indicates that it returns a tuple consisting of a string and a number. This allows you to know what to expect from the function (especially if you haven't written the function) and to continue to take advantage of the types of the different parts of the tuple in your subsequent code.

Simplify with destructuring

As I already talked about destructuring in a previous article, I decided to add this short part to show that we can make the examples above a little more pleasant.

Clearly, we're going to add some “syntactic sugar” to our code. Operation will not change. It will just be more “beautiful” or friendly to use.

function returnSeveralDataInArray() {
    return ['valeur 1', 2]
}

const [datum1, datum2] = returnSeveralDataInArray()

function returnSeveralDataInObj() {
    return { one: '1', two: 2}
}

const { one, two } = returnSeveralDataInObj()

It doesn't change much, but we, at least, have the impression that we are actually getting two values from the function and that it was originally planned by JavaScript.

I did not use the names “datum1” and “datum2” in the example with the use of the object, although know that it is quite possible to do it thanks to the aliases. Feel free to read the article on destructuring for more information.

If you have any questions or advices, please create a comment below! I'll be really glad to read you. Also if you like this post, don't forget to share it with your friends. It helps a lot!