Utiliser les object literals pour ameliorer les conditions

Le code que nous ecrivons contient souvent des conditions. Pour cela, nous pouvons utiliser les instructions if/else ou switch en Javascript et en Typescript. Bien que ces instructions soient simples a utiliser et connues par tous les developpeurs, elles presentent certains inconvenients et peuvent ainsi reduire la qualite et la lisibilite du code.

L'objectif de cet article est de vous presenter les object literals dans le cas de la declaration de conditions, en Typescript. Le but est de vous permettre d'avoir des outils supplementaires pour definir vos conditions dans votre code et ainsi d'ameliorer la qualite de celui-ci.

Inconvenients des conditions if/else

Pour definir une condition dans votre code, l'une des methodes les plus simples est d'utiliser l'instruction if/else. Elle a l'avantage d'etre simple, concise, et connue par tous les developpeurs.

if (role === 'utilisateur') {
	// do something
}

Cependant, cette methode peut devenir contraignante des qu'on commence a avoir des conditions plus complexes et/ou des conditions avec un certain nombre de cas possibles :

const getStatusMessage = (status: string): string => {
    if (status === 'success') {
        return 'Operation was successful.';
    } else if (status === 'error') {
        return 'There was an error.';
    } else if (status === 'loading') {
        return 'Loading...';
    } else {
        return 'Unknown status.';
    }
}
 
console.log(getStatusMessage('success'));  // Output: Operation was successful.

Pour ameliorer le code et ainsi faciliter la lisibilite et la maintenabilite de ce dernier, nous pouvons utiliser une autre instruction avec ses avantages et ses inconvenients : l'instruction switch.

Inconvenients des conditions switch

L'instruction switch permet d'executer du code des lors qu'un cas est trouve. Si aucun cas est trouve, une instruction par defaut peut etre realisee. Cette instruction par defaut est souvent declaree a la fin des differents cas.

const getStatusMessage = (status: string): string => {
    switch (status) {
        case 'success':
            return 'Operation was successful.';
        case 'error':
            return 'There was an error.';
        case 'loading':
            return 'Loading...';
        default:
            return 'Unknown status.';
    }
}
 
console.log(getStatusMessage('error'));  // Output: There was an error.

Le probleme avec l'instruction switch est qu'elle peut etre verbeuse des que l'on commence a avoir un certain nombre de cas. De plus, si on souhaite que chaque cas soit traite de maniere independante, il ne faut pas oublier d'ajouter l'instruction break a chaque fin de cas.

Un autre probleme lorsqu'on utilise l'instruction switch est le fait de ne pas respecter le principe de open/closed des principes SOLID.

Pour repondre a ces problemes, il existe une solution : les object literals.

Avantages des object literals en Typescript

Les object literals peuvent etre utilises pour definir plus efficacement des conditions dans notre code. Ce sont des objets Javascript qui permettent de stocker des paires cles/valeurs.

Voici un exemple d'utilisation des object literals pour definir une condition :

const getStatusMessage = (status: string): string => {
    const statusMessages: { [key: string]: string } = {
        success: 'Operation was successful.',
        error: 'There was an error.',
        loading: 'Loading...',
        default: 'Unknown status.'
    };
 
    return statusMessages[status] || statusMessages.default;
}
 
console.log(getStatusMessage('loading'));  // Output: Loading...

Grace aux object literals, nous pouvons definir des conditions complexes de maniere plus lisible et plus maintenable.

Contrairement a l'instruction if/else, nous n'avons pas besoin de verifier chaque condition une par une. De plus, si nous souhaitons ajouter un nouveau cas, il suffit d'ajouter une nouvelle entree dans l'objet.

De meme, si nous souhaitons ajouter une condition par defaut, nous pouvons ajouter une entree avec une cle par defaut.

Compare a l'instruction switch, il n'est pas necessaire d'ajouter une instruction break a la fin de chaque cas. De plus, les object literals permettent de respecter le principe de open/closed des principes SOLID.

Application du principe Open/Closed aux conditions

Le principe open/closed fait partie des principes SOLID, qui sont un ensemble de bonnes pratiques pour ecrire du code maintenable, evolutif, et flexible. Ce principe stipule que le code doit etre ouvert a l'extension mais ferme a la modification.

Cela signifie qu'il devrait etre possible d'ajouter de nouveaux comportements ou fonctionnalites a une classe, une fonction, ou un module, sans avoir a modifier le code existant. Cela permet de limiter les risques d'introduire des bugs ou de casser des fonctionnalites existantes lorsque le code est modifie.

Prenons un exemple classique avec l'utilisation d'une structure if/else ou switch. Chaque fois que vous voulez ajouter une nouvelle condition, vous devez modifier le code existant pour gerer le nouveau cas. Cela va a l'encontre du principe open/closed car le code doit etre modifie, et potentiellement, cela peut affecter des comportements precedemment fonctionnels.

Exemple avec switch (non conforme au principe open/closed) :

const getStatusMessage = (status: string): string => {
    switch (status) {
        case 'success':
            return 'Operation was successful.';
        case 'error':
            return 'There was an error.';
        case 'loading':
            return 'Loading...';
        default:
            return 'Unknown status.';
    }
}

Dans cet exemple, si on veut ajouter un nouveau statut (par exemple pending), il faut modifier la fonction getStatusMessage en ajoutant un nouveau case. Cela augmente les risques de creer des erreurs et rend le code moins evolutif au fur et a mesure que les cas augmentent.

Exemple avec object literals (conforme au principe open/closed) :

const statusMessages: { [key: string]: string } = {
    success: 'Operation was successful.',
    error: 'There was an error.',
    loading: 'Loading...',
    default: 'Unknown status.'
};
 
const getStatusMessage = (status: string): string => {
    return statusMessages[status] || statusMessages.default;
}

Dans cet exemple, si nous voulons ajouter un nouveau statut comme pending, il suffit d'ajouter une nouvelle cle/valeur a l'objet statusMessages, sans toucher a la fonction getStatusMessage. Ainsi, le code est ouvert a l'extension (on peut ajouter de nouvelles entrees dans l'objet), mais ferme a la modification (la fonction elle-meme reste inchangee).

Le respect du principe open/closed permet ainsi :

• Moins de risques d'erreurs : En ne modifiant pas le code existant, vous evitez de casser des comportements qui fonctionnent deja.
• Facilite d'extension : Ajouter de nouveaux comportements devient simple et ne necessite pas de toucher au coeur de la logique, ce qui rend le code plus evolutif.
• Maintenabilite : Le code est plus facile a comprendre et a maintenir dans le temps. Les nouveaux developpeurs peuvent ajouter de nouveaux cas en modifiant une structure preexistante (comme l'objet statusMessages) sans avoir a comprendre et reecrire la logique entiere.

Conclusion

Les object literals sont un outil puissant pour definir des conditions complexes et/ou longues. Ils permettent de rendre notre code plus lisible, plus maintenable et de respecter les principes SOLID.

Cependant, comme tout outil, il est important d'utiliser cette technique lorsque c'est necessaire et qu'elle se presente comme la plus appropriee.

Si vous avez une condition simple, il est preferable d'utiliser l'instruction if/else. Si vous avez une condition complexe, vous pouvez utiliser les object literals.