Was ist funktionale Programmierung und wie kann man sie in JavaScript umsetzen?

Sie: „Hey, ich höre immer wieder von funktionaler Programmierung. Es klingt cool, aber was ist es wirklich und wie unterscheidet es sich von dem, was ich bereits in JavaScript mache?“

Ich: Tolle Frage! Lassen Sie uns es Schritt für Schritt aufschlüsseln und die funktionale Programmierung (FP) mit der traditionellen imperativen Methode des Codierens vergleichen.

---

? Was ist der Unterschied zwischen funktional und imperativ?

Bei der imperativen Programmierung schreiben Sie Schritt-für-Schritt-Anleitungen, wie etwas zu tun ist. Es geht um die Abfolge der Aufgaben – Variablen aktualisieren, Schleifen verwenden und Status direkt ändern.

Bei der funktionalen Programmierung konzentrieren Sie sich auf was Sie tun möchten. Sie verwenden reine Funktionen, vermeiden direkte Mutationen und nutzen deklarative Tools wie Zuordnen, Filtern und Reduzieren.

Sehen wir uns dies anhand von Beispielen nebeneinander anhand eines CRUD-Szenarios (Erstellen, Lesen, Aktualisieren, Löschen) zum Verwalten einer Benutzerliste an.

---

?️ Beispiel 1: Hinzufügen eines Benutzers

Imperativer Weg

Hier ist ein zwingendes Beispiel, bei dem wir das ursprüngliche Array mutieren:

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

function addUser(users, newUser) {
  users.push(newUser); // Directly modifies the array
}

addUser(users, { id: 3, name: 'Charlie' });
console.log(users);

Probleme:

1. Mutation: Die push()-Methode ändert das ursprüngliche Array.
2. Nebenwirkungen: Wenn andere Teile des Codes von Benutzern abhängig sind, können sie unerwartet betroffen sein.

---

Funktioneller Weg

Hier ist der funktionale Ansatz, bei dem wir ein neues Array zurückgeben, anstatt es zu mutieren:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const addUser = (users, newUser) => [...users, newUser]; // Returns a new array

const newUsers = addUser(users, { id: 3, name: 'Charlie' });
console.log('Original:', users);
console.log('New:', newUsers);

Vorteile:

1. Keine Mutation: Das ursprüngliche Benutzerarray bleibt unberührt.
2. Vorhersehbar: Reine Funktionen erleichtern das Verständnis des Verhaltens.

---

?️ Beispiel 2: Aktualisieren eines Benutzers

Imperativer Weg

Hier ist ein Beispiel, bei dem wir ein Objekt innerhalb des Arrays direkt ändern:

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

function updateUser(users, id, newName) {
  for (let i = 0; i < users.length; i++) {
    if (users[i].id === id) {
      users[i].name = newName; // Directly mutates the object
      break;
    }
  }
}

updateUser(users, 1, 'Alicia');
console.log(users);

Probleme:

1. Mutation: Das Objekt innerhalb des Arrays wird direkt aktualisiert.
2. Ausführlichkeit: Die for-Schleife teilt dem Computer explizit mit, wie der Benutzer aktualisiert werden soll.

---

Funktioneller Weg

So machen wir es funktional mit Karte und Unveränderlichkeit:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const updateUser = (users, id, newName) =>
  users.map(user =>
    user.id === id ? { ...user, name: newName } : user
  );

const updatedUsers = updateUser(users, 1, 'Alicia');
console.log('Original:', users);
console.log('Updated:', updatedUsers);

Vorteile:

1. Keine Mutation: Wir geben ein neues Array zurück und lassen das Original unberührt.
2. Deklarativ: Map konzentriert sich auf was wir wollen – das Array transformieren – ohne Schleifen explizit zu verwalten.

---

?️ Beispiel 3: Einen Benutzer löschen

Imperativer Weg

Hier ist die zwingende Version mit einer Schleife und direkten Modifikationen:

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

function addUser(users, newUser) {
  users.push(newUser); // Directly modifies the array
}

addUser(users, { id: 3, name: 'Charlie' });
console.log(users);

Probleme:

1. Mutation: splice() modifiziert das ursprüngliche Array.
2. Komplexität: Manuelle Schleifen erschweren das Lesen.

---

Funktioneller Weg

Mithilfe des Filters können wir die Absicht deklarativ ausdrücken:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const addUser = (users, newUser) => [...users, newUser]; // Returns a new array

const newUsers = addUser(users, { id: 3, name: 'Charlie' });
console.log('Original:', users);
console.log('New:', newUsers);

Vorteile:

1. Keine Mutation: Filter erstellt ein neues Array.
2. Sauber und lesbar: Der Code kommuniziert klar die Absicht – Benutzer außer dem mit der angegebenen ID zu behalten.

---

? Übersichtstabelle: Funktional vs. Imperativ

Aspect	Imperative	Functional
Data Mutation	Mutates the original data (e.g., push, splice)	Avoids mutation; creates new data structures
Readability	Step-by-step, more verbose	Declarative and concise
Side Effects	More prone to unexpected side effects	Pure functions eliminate side effects
Focus	How to achieve a task (manual looping)	What to achieve (use higher-order functions)
Tools Used	Loops, conditionals	map, filter, reduce, spread operator

Aspekt

---

Imperativ

Funktional Datenmutation

Ändert die Originaldaten (z. B. Push, Splice) Vermeidet Mutationen; erstellt neue Datenstrukturen

Lesbarkeit

Schritt für Schritt, ausführlicher Deklarativ und prägnant Nebenwirkungen Anfälliger für unerwartete Nebenwirkungen Reine Funktionen eliminieren Nebenwirkungen

Fokus

Wie eine Aufgabe gelöst wird (manuelle Schleife)

Was erreicht werden soll (Funktionen höherer Ordnung verwenden) Verwendete Tools Schleifen, Bedingungen Karten-, Filter-, Reduzier- und Spread-Operator

---

? Warum funktionale Programmierung wählen?

Ihr Code lässt sich einfacher

überlegen und testen. Durch die Vermeidung von Nebenwirkungen wird die Wahrscheinlichkeit von Fehlern verringert. Es ist prägnanter

und

aussagekräftiger und reduziert die mentale Belastung.

Du: „Verstanden! Bei der funktionalen Programmierung geht es darum, vorhersehbaren, sauberen Code zu schreiben, ohne Daten zu verändern. Und es ist einfacher zu lesen!“ Ich: Genau! Durch den Wechsel von imperativ zu funktional erschließen Sie die wahre Leistungsfähigkeit von JavaScript. Fangen Sie klein an – verwenden Sie Karten, Filter und Reduzieren – und schon bald werden Sie funktional wie ein Profi programmieren. Bereit, es auszuprobieren? Dein zukünftiges Ich wird es dir danken! ?

Das obige ist der detaillierte Inhalt vonWas ist funktionale Programmierung und wie kann man sie in JavaScript umsetzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!