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 :
- MDN Object.freeze()
- Tutorialspoint Enums
- Enums dans le manuel Typescript
- Paquet Enum
- Paquet Enumify
- GitHub avec le code présenté dans cet article
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.
