Une alternative au Switch, c'est possible en JavaScript

0 commentaire

Vous connaissez tous l'instruction switch en JavaScript ; c'est une bonne alternative à la suite d'instruction if, else if, else if, else if... else dans le cas de choix multiples. Et si vous vous en débarrassiez pour quelque chose de plus simple concis ?

Les cas d'école

if, else if, encore else if, toujours else if... et else

Tout d'abord, rappelons la façon la plus simple connue de faire un choix parmi plusieurs valeurs :

// On a la variable "character" à tester.

var description /* = "Information obtenue d'une input, d'une variable GET/POST ou d'un cookie etc." */;

if (character === "edward") {
    description = "Edward Elric fait 1m57 + 6cm de mèche + 2 cm de talon.";
} else if (character === "alphonse") {
    description = "Alphonse Elric change de voix durant FMA Brotherhood.";
} else if (character === "winry") {
    description = "Winry Rockbell est secrètement amoureuse de R2D2.";
} else {
    description = "Y a pas mal de personnage.";
}

// On récupère la valeur de description.

Tu as trop de choix, utilise un Switch !

Avec l'instruction switch, on peut également produire le même résultat. Et oui, paraît que c'est plus rapide, ça utilise moins de caractères (346 au lieu de 352 !), c'est mieux de faire ça (on me l'a dit), ça sauve plus de chatons prématurés, bref c'est formidable !

// On a encore la variable "character" à tester.

var description /* = "Information obtenue d'une input, d'une variable GET/POST ou d'un cookie etc..." */;

switch (character) {
    case "edward":
        description = "Edward Elric fait 1m57 + 6cm de mèche + 2 cm de talon.";
        break;
    case "alphonse":
        description = "Alphonse Elric change de voix durant FMA Brotherhood.";
        break;
    case "winry":
        description = "Winry Rockbell est secrètement amoureuse de R2D2.";
        break;
    default : 
        description = "Y a pas mal de personnage.";
}

// On récupère encore la valeur de description.

Simplement, il y a quelques petites choses qui m'ennuient avec le switch. Non pas que ce soit une mauvaise idée de l'utiliser, mais j'ai du mal avec sa syntaxe (bien que je m'y sois fait) et oublier le mot clé break vous envoie droit au bûché. C'est vrai, dans la majorité des cas il est nécessaire : alors ça aurait été sympa qu'il soit implicite, quitte à utiliser un mot-clé pour simuler le fonctionnement d'un switch sans break.

Ce problème fait l'Objet d'une astuce

L'alternative au Switch, (et au If) ?

Les deux cas ci-dessus peuvent être remplacés élégamment par un parcourt de valeur dans un litérale JSON ! Voyez plutôt :

// On a toujours la variable "character" à tester.
var description /* = "Information obtenue d'une input, d'une variable GET/POST ou d'un cookie etc..." */, 
    descriptions;

/* J'associe à une clé, une valeur. Une sorte de dictionnaire. */
descriptions = {
    "edward" : "Edward Elric fait 1m57 + 6cm de mèche + 2 cm de talon.",
    "alphonse" : "Alphonse Elric change de voix durant FMA Brotherhood.",
    "winry" : "Winry Rockbell est secrètement amoureuse de R2D2.",
    "other" : "Y a pas mal de personnage."
}

/* Je cherche la valeur clé dans mon dictionnaire. Si elle n'est pas trouvé,
'descriptions[character]' renvoi 'undefinded' qui est testé comme 'false' et on prend alors la valeur par défaut 'other'. */
description = descriptions[character] || descriptions["other"];

// On récupère toujours la valeur de description.

Cela a l'avantage de séparer la logique (dernière ligne), des données (l'objet JSON) ; ce qui n'est pas le cas de nos précédents exemples.

Et pour plusieurs instructions ?

Rien ne vous empêche de vous créer ce genre de "Switch" avec un Objet qui fait un calcule avant retour :

// On a toujours la variable "character" à tester.
var description /* = "Information obtenue d'une input, d'une variable GET/POST ou d'un cookie etc..." */, 
    descriptions;

descriptions = {
    "edward" : function () {
        // Trucs un peu plus conséquents.
        return; // Le résultat. 
    },
    "alphonse" : function () {
        // Trucs un peu plus conséquents.
        return; // Le résultat. 
    },
    "winry" : function () {
        // Trucs un peu plus conséquents.
        return; // Le résultat. 
    },
    "other" : function () {
        // Trucs un peu plus conséquents.
        return; // Le résultat. 
    }
}

// On choisit le bon calcul/résultat à obtenir.
description = descriptions[character] || descriptions["other"];

// Et on l'exécute.
description();

Vous pouvez également préparer des traitements différents en fonction de la variable.

// On a toujours la variable "character" à tester.
var description /* = "Information obtenue d'une input, d'une variable GET/POST ou d'un cookie etc..." */, 
    descriptions = {};

descriptions["edward"] = function () {
    // Traitement de controle ici.
};

descriptions["winry"] = function () {
    // Traitement de controle ici.
};

descriptions["edward"] = function () {
    // Traitement de controle ici.
};

descriptions["other"] = function () {
    // Traitement de controle ici.
};

// On choisit la bonne fonction à exécuter.
description = descriptions[character] || descriptions["other"];

// Et on l'exécute.
description();

Le(s) mot(s) de la fin

Je ne me risquerais pas à dire que c'est une bonne pratique, mais c'est au moins une bonne astuce que j'utilise régulièrement. Qu'en pensez vous ?

Lire dans une autre langue