{ Soham Kamani }

About Blog Github Twitter

🌙
☀️

Verwendung von Enums (Aufzählungen) in Javascript

Es gibt viele Zeiten, in denen enums nützlich sind, und manchmal sogar notwendig.

Obwohl Javascript nicht nativ enums unterstützt, gibt es eine Menge von Optionen, wenn es um die Implementierung von enums mit Javascript kommt.

Die naive Art der Implementierung von “enums”

Enums werden verwendet, um eine feste Anzahl von möglichen Werten zu repräsentieren. Wenn die Anzahl der möglichen Werte 2 ist (wie im Fall von Flags), würdest du einfach einen boolean verwenden.

Wenn du z. B. ein Popup in Ihrer Anwendung anzeigen möchtest, aber nur im Sommer, würde es etwa so aussehen (versuche es hier) :

let isSummer = true // or, let isSummer = false

if (isSummer) {
	showPopUp()
}

Betrachten wir nun den Fall, dass du das Thema Ihrer Anwendung basierend auf einer der vier Jahreszeiten (Sommer, Winter, Herbst und Frühling) ändern musst

Wenn du aus einem Umfeld kommst, in dem enums bisher nicht verwendet wurden, hast du wahrscheinlich die hart kodierte String-Methode verwendet, um so etwas zu implementieren (versuche es hier):

let season = "summer"
/*
or, 
let season = 'winter'
let season = 'spring'
let season = 'autumn'
*/

switch (season) {
	case "summer":
	// Do something for summer
	case "winter":
	//Do something for winter
	case "Spring":
	//Do something for spring
	case "autumn":
	//Do something for autumn
}

Wenn du genau hinsiehst, wird das Problem mit dieser Art der Implementierung im obigen Beispiel deutlich: Du würdest im Fall von “Frühling” fehlschlagen, da wir in unserer switch-case-Anweisung einen Rechtschreibfehler gemacht und stattdessen versehentlich den Titelfall “frühling” verwendet haben.

Während dies im obigen Beispiel leicht zu beheben ist, wird das Leben viel schwieriger, wenn du eine Anwendung mit Hunderten von Codedateien pflegen musst, die überall hart kodierte Zeichenketten verwenden.

Aufzählungen mit Objekten

Ein besserer Weg, Aufzählungen zu implementieren, ist über Objekte. Betrachte diese refaktorisierte Version des obigen Beispiels (versuche es hier):

const seasons = {
	SUMMER: "summer",
	WINTER: "winter",
	SPRING: "spring",
	AUTUMN: "autumn",
}

let season = seasons.SPRING

if (!season) {
	throw new Error("Season is not defined")
}

switch (season) {
	case seasons.SUMMER:
	// Do something for summer
	case seasons.WINTER:
	//Do something for winter
	case seasons.SPRING:
	//Do something for spring
	case seasons.AUTUMN:
	//Do something for autumn
}

Da es keinen Unterschied macht, welche Werte wir für die enums verwenden, verwenden wir Stringnamen (wie 'summer' für seasons.SUMMER). Dies kann bei der Fehlersuche eine nützlichere Meldung liefern als die Verwendung von Zahlen, die bei der Verwendung von enums die üblichere Wahl sind

Die seasons Objekte sind nun eine Implementierung eines enums mit vier möglichen Werten. Durch diese Implementierung haben wir unseren Code in zweierlei Hinsicht verbessert:

  1. Konsistenz : Du musst dich nicht mehr über den genauen Wert der Zeichenkette für jede Jahreszeit Gedanken machen. Außerdem können viele Texteditoren diese Werte jetzt automatisch vervollständigen (wie dieser Screenshot aus dem VS-Code-Editor) : screenshot of editor autocomplete
  2. Fehlerbehandlung : Auch wenn es Rechtschreibfehler gibt, haben wir jetzt eine generelle Möglichkeit, diese anmutig zu behandeln. Dies stellt sicher, dass unser Programm auf eine vorhersehbare Weise fehlschlägt

Enums mit Namensraum

Wir können auch enums ineinander einbetten, falls wir Namensräume benötigen (versuchen es hier):

const seasons = {
	SUMMER: {
		BEGINNING: "summer.beginning",
		ENDING: "summer.ending",
	},
	WINTER: "winter",
	SPRING: "spring",
	AUTUMN: "autumn",
}

let season = seasons.SUMMER.BEGINNING

if (!season) {
	throw new Error("Season is not defined")
}

switch (season) {
	case seasons.SUMMER.BEGINNING:
	// Do something for summer beginning
	case seasons.SUMMER.ENDING:
	// Do something for summer ending
	case seasons.SUMMER:
	// This will work if season = seasons.SUMMER
	// Do something for summer (generic)
	case seasons.WINTER:
	//Do something for winter
	case seasons.SPRING:
	//Do something for spring
	case seasons.AUTUMN:
	//Do something for autumn
}

In diesem Beispiel haben wir die Sommersaison in zwei Bereiche (BEGINNING und ENDING) unterteilt, die wir nun als separate enum-Werte verwenden können.

Eine interessante Tatsache ist, dass wir auch den ursprünglichen seasons.SUMMER Enum-Wert verwenden können. Da Objektwerte per Referenz übergeben werden, werden alle zwei Variablen, die seasons.SUMMER referenzieren, gleich sein.

Wann sollte man enums in Javascript verwenden?

Die Gründe für die Verwendung von enums in Javascript sind die gleichen wie die Gründe, solltest du es für jede andere Programmiersprache zu verwenden: Verwende enums, wenn es eine bestimmte Anzahl von festen Werten für eine Variable gibt.

Letztendlich führt die korrekte Verwendung von Enums in Javascript zu besserem Code, der stabiler, einfacher zu lesen und weniger fehleranfällig ist.


Like what I write? Join my mailing list, and I'll let you know whenever I write another post. No spam, I promise!

Comments

Soham Kamani

Written by Soham Kamani, an author,and a full-stack developer who has extensive experience in the JavaScript ecosystem, and building large scale applications in Go. He is an open source enthusiast and an avid blogger. You should follow him on Twitter