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

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!