Création d’Enums avec JavaScript Vanille

-

Commençons par une question : Les nombres peuvent-ils représenter les types de certains sujets ? Confus, n’est-ce pas ?

Ce n’est pas grave, car un nombre peut signifier tout ce que l’on veut, à commencer par les types de voitures (disons, 1 pour camion) ou même l’état d’un calcul (par exemple, 1 pour commencer).

Nous pourrions penser qu’il suffit d’avoir une variable pour la comprendre. Jetons un coup d’œil rapide au code ci-dessous :

const TRUCK = 1;

function getCarByType(type) {
  if (type === TRUCK) {
    return { name: 'Super Truck' }; // imagine that it's a truck object
  }

  return { name: 'Usual Car' };
}

Wow ! Nous pouvons déterminer le type de voiture ! Mais que faire si nous devons ajouter d’autres types de voitures ?

const TRUCK = 1;
const SEDAN = 2;

function getCarByType(type) {
  if (type === TRUCK) {
    return { name: 'Super Truck' }; // imagine that it's a truck object
  }
  
  if (type === SEDAN) {
    return { name: 'Starry Sedan' }; // imagine that it's a sedan object
  }
  
  return { name: 'Usual Car' };
}

Nous pouvons faire cela à l’infini, et cela fonctionnera toujours. Ces types ne seront cependant pas connectés logiquement. Ils seront juste des constantes séparées qui peuvent être déplacées n’importe où dans votre code. La manipulation des variables de cette façon est un peu désordonnée.

Que sont les Enums ?

Dans ce contexte, laissez-moi vous présenter les Enums (le type énumération). Avec les Enums, un développeur peut définir un ensemble de constantes nommées. Il est ainsi plus facile de documenter ou de créer un ensemble de cas distincts.

L’utilisation des Enums peut également limiter les erreurs d’orthographe, car les Enums sont immuables. Et cela peut rendre votre code plus sûr et plus propre (c’est-à-dire consultable par nom, avec la possibilité de supprimer les valeurs magiques, etc.) Considérez les Enums comme une sorte de classe fermée, dont les instances sont prédéfinies de manière statique.

Il y a cependant un petit problème : les Enums ne sont pas pris en charge en JavaScript de manière native. Cependant, comme l’Enum est un modèle, il peut être reproduit via certaines techniques et fonctionnalités de JavaScript natif.

Jetons un coup d’œil à deux options d’application de l’énumérateur en JavaScript.

L’énumération JavaScript : une représentation de base

Étape 1. Définir un objet littéral simple (POJO)

Comme nous l’avons mentionné précédemment, les Enums sont des constantes de nom ou, en d’autres termes, des paires clé-valeur, nous pouvons donc simplement créer un objet.

const ProcessStatuses = {
  STARTED: 1,
  IN_PROGRESS: 2,
  FINISHED: 3
}

La convention de nommage est ici une question de goût. La plus répandue est PascalCase pour le nom, et UPPER_CASE pour les clés. Mais encore une fois, c’est à vous de décider comment vous voulez que ça se présente.

Notez que cela ne reproduit toujours pas les vrais Enums, car les valeurs peuvent être modifiées facilement.

Étape 2. Assurez-vous que les valeurs sont constantes

En JS natif, il est possible de garder les propriétés de l’objet inchangées. La première option consiste à utiliser la méthode defineProperty, mais dans ES6, nous disposons de la méthode freeze pour le faire :

const ProcessStatuses = Object.freeze({ 
  STARTED: 1, 
  IN_PROGRESS: 2, 
  FINISHED: 3 
});

C’est tout pour les scénarios de base. Pour des scénarios plus complexes, où les valeurs doivent être des objets ou une autre logique doit être incluse, nous pouvons développer notre propre implémentation d’Enum.

Enumérateur JavaScript : une représentation avancée

Comme nous le savons, Enum est une classe avec des instances prédéfinies. Alors, regardons de près notre implémentation. Nous utiliserons ES6, puisque les versions plus anciennes ne sont pas vraiment pertinentes ici :

class ProcessStatus {
  static STARTED = new ProcessStatus('STARTED', 1);
  static IN_PROGRESS = new ProcessStatus('IN_PROGRESS', 2);
  static FINISHED = new ProcessStatus('FINISHED', 3);
  
  constructor(key, value) {
    this.key = key;
    this.value = value;
    // here you can include more different properties
    Object.freeze(this);
  }
  
  // toString is just an example of some custom logic that can be implemented here
  toString() {
    return `[${this.key}] => ${this.value}`;
  }
}

Dans ce cas, nous prédéfinissons littéralement les instances de la classe qui peuvent être utilisées dans notre logique d’affaire, et nous ajoutons la méthode toString comme exemple de logique personnalisée pour notre énumération.

Nous pouvons rendre cet exemple étirable, ajouter d’autres méthodes utiles et utiliser la classe Proxy pour restreindre la modification directe des propriétés, mais je vous laisse le soin d’étudier ces questions, car elles dépassent le cadre de cet article.

Autres options

Vous pouvez également utiliser des paquets NPM tels que enumify, qui permet d’implémenter le motif enum lui-même, ou un paquet enum qui fournit une implémentation complète avec plus de fonctionnalités, comme les espaces de noms.

Enfin, si vous utilisez TypeScript dans votre projet, les enums sont disponibles dès le départ.

Conclusion et liens utiles

Ce qui précède explique comment nous avons plongé dans les Enums et même créé notre propre énumération personnalisée en JavaScript.

Un petit avertissement : vous devez bien réfléchir avant d’utiliser les Enums car ils ne sont pas uniformément utiles dans tous les cas. Ils peuvent cependant être bénéfiques dans la majorité des situations.

Voici quelques liens utiles qui pourraient vous intéresser :

Merci de votre lecture ! J’espère que vous avez apprécié ce bref tutoriel et que vous avez appris quelque chose de nouveau sur les énumérations en JavaScript.

Alfredhttps://www.alfreddagenais.com
Je suis un développeur Web Full Stack sénior. Chaque jour est pour moi une journée de plus pour découvrir de nouvelles idées. Le développement web et l'informatique sont omniprésents dans mon quotidien. Pour que la créativité soit à son maximum, il ne faut pas avoir peur d’expérimenter et nous avons tous que le Web est infiniment grand pour expérimenter nos idées.

Buy me a coffee Paypal Patreon Ko-Fi

Share this article

Recent posts

Popular categories

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici

Recent comments