3 alternatives à if & else pour améliorer la lecture du code en javascript

Ecrire des conditions pour tester des expressions et des variables fait partie de la logique de base.
En javascript la condition if, else if, else est largement utilisée mais peut dans certains cas devenir lourde à écrire ou relire, ou peut être simplifiée et offrir une meilleure lisibilité du code.

Switch

Le switch va permettre de tester une variable et de passer en revue les différents cas.
Je trouve cette méthode pratique dans le cas où les cas à tester sont nombreux et/ou quand on ne peut pas définir la quantité de tests à réaliser lorsque l’on code la fonction.
Généralement c’est cette méthode qui est utilisée dans les fichiers reducers de Redux.

Exemple :
Si nous considérons une condition pour tester la variable « test » afin de vérifier si elle contient les valeurs « toto », « tata », « test » ou autre.
Avec if, else if et else nous avons :

const test = "test";

if (test === "toto") {
  console.log("toto");
} else if (test === "tata") {
  console.log("tata");
} else if (test === "test") {
  console.log("C'est bien ça !!");
} else {
  console.log("aucune des valeurs testée n'est vraie");
};

// renvoie "C'est bien ça !!"

Avec un switch :

const test = "test";

switch(test) {
  case "toto":
    console.log("toto");
    break;
  
  case "tata":
    console.log("tata");
    break;

  case "test":
    console.log("C'est bien ça !!");
    break;

  default:
    console.log("aucune des valeurs testée n'est vraie");
    break;
};

// renvoie "C'est bien ça !!"

A noter qu’il faut à chaque test un break ou un return pour stopper le switch, sans quoi il va continuer l’exécution jusqu’à la fin et renvoyer systématiquement la valeur par défaut.
Même si le switch va contenir au final plus de lignes que la version avec if, else if et else, je trouve la lecture plus simple, et donc la compréhension et la maintenance.

Opérateur &&

L’opérateur && va permettre de tester si une condition est vraie.
J’utilise beaucoup cet opérateur pour contextualiser les composants React.
Si la condition avant l’opérateur est vraie, les commandes suivantes seront exécutées, sinon le bloc sera ignoré.

Syntaxe :
condition && si vrai

Exemple :

const test = true;

if (test === true) {
  console.log("Ca fonctionne");
};

// renvoie "Ca fonctionne"

Cette condition peut aussi s’écrire :

const test = true;

if (test) console.log("Ca fonctionne");

// renvoie "Ca fonctionne"

Avec l’opérateur && :

const test = true;

test && console.log("Ca fonctionne");

// renvoie "Ca fonctionne"

Dans un composant React :

const test = true;

test &&
  <div>
    <ComposantEnfant />
  </div>;

Opérateur ternaire

L’opérateur ternaire permet de tester une variable et de retourner un résultat si la condition est vraie, et un résultat si la condition est fausse.
La syntaxe est assez simple et intuitive : on écrit la condition suivie d’un ? Puis les résultat en cas de succès et d’échec séparés par un :
condition ? si vrai : si faux

Avec un if :

const test = true;

if (test === true) {
  console.log("Ca fonctionne");
} else {
  console.log("Ca ne fonctionne pas");
};

// renvoie "Ca fonctionne"

Avec l’opérateur ternaire :

const test = true;

test ? console.log("Ca fonctionne") : console.log("Ca ne fonctionne pas");

// renvoie "Ca fonctionne"

Conclusion

Il y a beaucoup de moyens à disposition pour évaluer les variables et retours de fonctions en javascript, et pour ma part je pratique beaucoup l’opérateur && dans les composants React et l’opérateur ternaire. Je trouve que la lisibilité du code est améliorée, et que ça permet de faciliter les codes reviews.

article également disponible sur Medium :

• english version
• en français