Retourner plusieurs valeurs à partir d'une fonction en JavaScript

Un petit article simple et rapide aujourd'hui pour répondre à une question précise en complément du dernier article : Comment faire pour retourner plusieurs valeurs depuis une seule fonction en JavaScript ?

La réponse courte est : "ce n'est pas possible". Mais comme vous le savez, s'il s'agit d'un vrai besoin, les développeurs trouvent généralement un moyen de le faire. Et, c'est ce que nous allons expliquer dans cet article.

Wrapper plusieurs valeurs dans une autre

Comme nous l'avons vu plus haut, nous ne pouvons pas retourner plusieurs valeurs en même temps. La raison pour cela est que nous retournons des valeurs en utilisant l'instruction return. Cette instruction ne sait gérer qu'une seule valeur à la fois et nous ne pouvons utiliser qu'une seule instruction return par fonction (la seconde et les suivantes faisant partie du code mort).

Mais, il existe des valeurs qui peuvent en contenir d'autres, comme les tableaux ou les objets par exemple. Retourner un tableau de valeur ou un objet créé juste pour l'occasion comme ci-dessous va donc être notre solution pour contourner les limitations de JavaScript.

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

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

Ces deux options vous permettent de récupérer plusieurs valeurs en une seule fois soit en utilisant leur ordre, soit en utilisant leur nom.

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

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

Le type Tuple en TypeScript

Les développeurs de TypeScript ont essayé de structurer les cas (comme celui) où nous avons besoin de rassembler certaines valeurs pour une utilisation précise et souvent limitée dans le temps. Pour cela, ils ont ajouté un nouveau type au langage : les tuples.

Le dictionnaire décrit un tuple comme "une structure de donnée constituée de plusieurs parties". C'est un peu vaste, mais la documentation de TypeScript précise :

Un type tuple est une autre sorte de type Array qui sait exactement combien d'éléments il contient et exactement quels types il contient à des positions spécifiques.

En somme, exactement comme nos tableaux qui rassemblent les données que nous souhaitons retourner en une seule fois.

Regardez donc l'équivalent TypeScript des exemples précédents :

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

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

Au final, ce n'est qu'un tableau comme celui que nous avons utilisé en JavaScript, mais ici TypeScript va s'assurer que vous ne passiez que deux valeurs dans ce tableau. Il va aussi vérifier que la chaine de caractère soit bien en première position et le nombre en seconde.

Aussi, la signature de la fonction indique qu'elle retourne un tuple composé d'une string et d'un number. Cela vous permet de savoir à quoi vous attendre lors de l'utilisation de la fonction (surtout si vous n'avez pas écrit la fonction) et de continuer à profiter des types des différentes parties du tuple dans la suite de votre code.

Simplifier grâce à la déstructuration

Comme je vous ai déjà parlé de la destructuration dans un précédent article, j'ai décidé de rajouter cette courte partie pour montrer que l'on peut rendre les exemples de cet article un peu plus agréables.

En clair, nous allons ajouter un peu de "sucre syntaxique" à notre code. Le fonctionnement ne changera pas. Il sera juste plus "beau" ou sympathique à utiliser.

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

const [datum1, datum2] = returnSeveralDataInArray()

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

const { one, two } = returnSeveralDataInObj()

Cela ne change pas grand-chose, mais on a au moins l'impression que l'on récupère réellement deux valeurs de la fonction et que c'était prévu à la base par JavaScript.

Je n'ai pas utilisé les noms "datum1" et "datum2" dans l'exemple avec l'utilisation de l'objet, néanmoins sachez qu'il est tout à fait possible de le faire grâce aux alias. N'hésitez pas à relire l'article sur la déstructuration pour avoir plus d'informations.

Si vous avez des questions ou des remarques/conseils, n'hésitez pas à laisser un commentaire plus bas ! Je serais ravis de vous lire. Et si vous aimez l'article, n'oubliez pas de le partager avec vos amis.