Funktional vs OOP in JS: Was wählen im Jahr 2024?

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

Zwei Seiten derselben Medaille: Funktionaler vs. objektorientierter Ansatz in JavaScript

\n\n

Wenn Sie sich jemals gefragt haben, warum manche Entwickler Code schreiben, der wie eine mathematische Formel aussieht, und andere wie eine Anleitung zum Zusammenbau von IKEA-Möbeln, dann sind Sie auf die uralte Debatte gestoßen: funktionale Programmierung (FP) vs. objektorientierte Programmierung (OOP) in JavaScript.

\n\n

JavaScript ist eine einzigartige Sprache. Sie wurde als Skriptsprache für kleine Schaltflächen geboren und hat sich zu einem Monster entwickelt, das alles kann. Sie ist multiparadigmatisch: Sie können in ihr im prozeduralen, OOP- oder funktionalen Stil schreiben. Und hier wird es richtig interessant. Welchen Ansatz sollte ein Anfänger wählen? Und ein erfahrener Entwickler? Lassen Sie es uns ohne Fanatismus anhand realer Beispiele herausfinden.

\n\n

Kurz und knapp: Was ist was?

\n\n

Objektorientierter Ansatz (OOP) dreht sich um "Entitäten". Sie haben Objekte (Katze, Auto, Benutzer), diese haben Eigenschaften (Farbe, Geschwindigkeit, Name) und Methoden (miauen, fahren, einloggen). Sie gruppieren Daten und Verhalten zusammen. Klassiker: class Car { drive() {} }.

\n\n

Funktionaler Ansatz (FP) dreht sich um "Aktionen". Daten und Funktionen sind getrennt. Funktionen sind reine Transformatoren: Eingabe sind Daten, Ausgabe sind andere Daten, ohne Nebeneffekte. Kein this, keine Mutationen und kein versteckter Zustand.

\n\n

Die Ironie ist, dass JavaScript von Haus aus weder für das eine noch für das andere ideal ist, aber es erlaubt, beide Stile elegant zu verwenden. Die Frage ist nur, wann man welchen anwendet.

\n\n

OOP in JavaScript: Von Prototypen zu ES6-Klassen

\n\n

Vor langer Zeit, im Zeitalter des IE6, sah OOP in JS erschreckend aus. Alles basierte auf Prototypen – einem Mechanismus, bei dem Objekte Eigenschaften von anderen Objekten erben. Das war mächtig, aber nicht intuitiv.

\n\n

Mit dem Aufkommen von ES6 (ES2015) wurde der Sprache syntaktischer Zucker hinzugefügt – class. Aber es ist wichtig zu verstehen: Unter der Haube sind es immer noch dieselben Prototypen. Klassen haben den Code für diejenigen, die von Java oder C++ kamen, sauberer und verständlicher gemacht.

\n\n

OOP-Beispiel: Klasse "Benutzer"

\n\n

class User {\n  constructor(name, email) {\n    this.name = name;\n    this.email = email;\n    this.loggedIn = false;\n  }\n\n  login() {\n    this.loggedIn = true;\n    return `${this.name} hat sich eingeloggt`;\n  }\n\n  logout() {\n    this.loggedIn = false;\n    return `${this.name} hat sich ausgeloggt`;\n  }\n}\n\nconst admin = new User('Anna', 'anna@example.com');\nconsole.log(admin.login()); // Anna hat sich eingeloggt\n

\n\n

Alles logisch: Die Daten (name, email) leben zusammen mit den Methoden (login, logout). Der Zustand des Objekts wird über seine eigenen Methoden geändert. Das ist klassische Kapselung.

\n\n

Probleme von OOP in JS

Der this-Kontext. Der Verlust des Kontexts ist die Geißel der Anfänger. Wenn eine Methode als Callback übergeben wird, "bricht" this. Man muss .bind(), Pfeilfunktionen oder Closures verwenden.
Vererbung. Tiefe Klassenhierarchien ("Rautenproblem") führen zu Verwirrung. Oft ist Komposition (Mixins) besser als Vererbung.
Zustand. Mutierender Zustand (wenn wir Eigenschaften eines Objekts ändern) ist die Hauptquelle für Fehler in großen Projekten. Eine Methode kann versehentlich etwas ändern, das sie nicht sollte.

\n\n

Funktionaler Ansatz: Reinheit und Vorhersagbarkeit

\n\n

Funktionale Programmierer betrachten OOP mit einem leichten Lächeln. Ihr Motto: "Daten sind Daten, Funktionen sind Funktionen. Mischt sie nicht durcheinander."

\n\n

Die Schlüsselkonzepte der funktionalen Programmierung in JavaScript: