Heim >Web-Frontend >js-Tutorial >Currying: Die modulare Superkraft von JavaScript freischalten

Currying: Die modulare Superkraft von JavaScript freischalten

Susan Sarandon
Susan SarandonOriginal
2024-12-09 12:02:24896Durchsuche

Currying: Unlocking the Modular Superpower of JavaScript

Inhaltsverzeichnis

  • Einführung
  • Was zum Teufel ist Curry?
  • Schritt-für-Schritt-Anleitung zum Currying
  • Warum sollten Sie sich für Curry interessieren?
  • Currying automatisieren (weil das Leben zu kurz ist)
  • TypeScript und Currying: Friends Forever
  • Eine kurze Anmerkung zu Fallstricken
  • Abschluss

Einführung

Haben Sie jemals Ihren Code angeschaut und gedacht: „Wow, das ist ungefähr so ​​organisiert wie meine Sockenschublade?“ Nun, du bist nicht allein. JavaScript kann trotz all seiner Macken und Reize chaotisch werden. Dann kommt Currying ins Spiel – eine magische Technik aus der funktionalen Programmierung, die Ihren Code modular, wiederverwendbar und, wie ich sagen möchte, elegant macht. Wenn das nach Zauberei klingt, schnallen Sie sich an. Wir tauchen gleich ein.


Was zum Teufel ist Currying?

Currying klingt wie etwas, das man in der Küche machen würde, aber in JavaScript ist es die Kunst, eine Funktion mit mehreren Argumenten in eine Folge von Funktionen umzuwandeln, die jeweils ein einzelnes Argument annehmen. Stellen Sie sich das so vor, als würden Sie ein kompliziertes Rezept in mundgerechte Schritte zerlegen.

Hier ist ein einfaches Beispiel:

function multiply(a: number, b: number) {
  return a * b;
}

Cool, oder? Diese Funktion erfordert jedoch beide Argumente im Voraus. Wenn Sie nicht bereit sind, sich auf beides festzulegen (wer ist das eigentlich?), können Sie es beim Currying stattdessen so nennen:

const curriedMultiply = (a: number) => (b: number) => a * b;

// Create reusable specialized functions
const double = curriedMultiply(2);
const triple = curriedMultiply(3);

console.log(double(4)); // Output: 8
console.log(triple(4)); // Output: 12

Boom! Jetzt können Sie ein Argument nach dem anderen vorbringen, als würden Sie ein Sandwich zusammenstellen. Nachdem Sie nun eine einfache Curry-Funktion gesehen haben, lernen wir Schritt für Schritt, wie man eine erstellt.


Schritt-für-Schritt-Anleitung zum Currying

  1. Beginnen Sie mit einer Funktion mit mehreren Argumenten
    Stellen Sie sich vor, Sie haben eine Funktion, die mehrere Argumente akzeptiert:

    function add(a: number, b: number, c: number) {
      return a + b + c;
    }
    
  2. Wickeln Sie es in Schichten
    Wandeln Sie es in eine Folge von Funktionen um:

    const curriedAdd = 
      (a: number) => (b: number) => (c: number) => a + b + c;
    
  3. Argumente einzeln übergeben
    Rufen Sie jede Ebene einzeln auf:

    const step1 = curriedAdd(2); // Fixes the first argument (a = 2)
    const step2 = step1(3);      // Fixes the second argument (b = 3)
    const result = step2(4);     // Fixes the third argument (c = 4)
    
    console.log(result);         // Output: 9
    
  4. Profitieren Sie von Flexibilität
    Jetzt haben Sie kleine, wiederverwendbare Schritte, die Ihren Code modularer machen.


Warum sollten Sie sich für Curry interessieren?

Currying hört sich vielleicht schick an, hat aber echte Vorteile:

  • Modularität: Zerlegen Sie große Funktionen in kleine, testbare Teile.
  • Wiederverwendbarkeit: Verwenden Sie vorhandenen Code, um spezielle Funktionsversionen zu erstellen.
  • Lesbarkeit: Ihr Code wird selbsterklärend, wie ein gut geschriebener Roman (oder zumindest ein anständiger).

Nehmen wir uns einen Moment Zeit, um uns daran zu erinnern, warum Lesbarkeit wichtig ist. Code wird nicht nur für Maschinen geschrieben – sie verstehen alles, was Sie ihnen entgegenwerfen. Es ist für Menschen geschrieben – Ihre Kollegen, Ihr zukünftiges Ich und die nächste Person, die es ändern muss. Guter Code sollte leicht zu verstehen, zu testen und zu ändern sein. Currying hilft dabei, die Logik in kleinere, klare Teile zu zerlegen, die auf den ersten Blick Sinn ergeben.

Angenommen, Sie filtern eine Liste von Objekten:

function multiply(a: number, b: number) {
  return a * b;
}

Oder Steuern berechnen:

const curriedMultiply = (a: number) => (b: number) => a * b;

// Create reusable specialized functions
const double = curriedMultiply(2);
const triple = curriedMultiply(3);

console.log(double(4)); // Output: 8
console.log(triple(4)); // Output: 12

Jede Funktion erfüllt eine Aufgabe: Sie erleichtert das Lesen, Verstehen und Testen Ihres Codes. Durch die Schaffung kleinerer, spezialisierter Funktionen macht Currying komplexe Logik einfach, wiederverwendbar und wartbar für die Menschen, die später daran arbeiten werden.


Currying automatisieren (weil das Leben zu kurz ist)

Alle diese verschachtelten Funktionen manuell eingeben? Nein danke. Lassen Sie uns das Currying automatisieren:

function add(a: number, b: number, c: number) {
  return a + b + c;
}

So funktioniert es:

  1. Wenn die Anzahl der Argumente mit der ursprünglichen Funktion übereinstimmt, wird die Funktion aufgerufen.
  2. Andernfalls wird eine neue Funktion zurückgegeben, die auf weitere Argumente wartet.

Beispiel:

const curriedAdd = 
  (a: number) => (b: number) => (c: number) => a + b + c;

Es ist wie ein Automat für Argumente: Legen Sie einen nach dem anderen oder alle auf einmal ein.


TypeScript und Currying: Friends Forever

Bringen Sie Currying mit der Typensicherheit in TypeScript auf die nächste Stufe:

const step1 = curriedAdd(2); // Fixes the first argument (a = 2)
const step2 = step1(3);      // Fixes the second argument (b = 3)
const result = step2(4);     // Fixes the third argument (c = 4)

console.log(result);         // Output: 9

Beispiel mit TypeScript:

const filterByKey = (key: string) => (value: any) => (data: any[]) =>
  data.filter((item) => item[key] === value);

// Create a reusable filter for colors
const filterByColor = filterByKey("color");
const redItems = filterByColor("red");

console.log(redItems([{ color: "red" }, { color: "blue" }])); 
// Output: [{ color: "red" }]

Ihre IDE wird Sie bei jedem Schritt begleiten.


Eine kurze Anmerkung zu Fallstricken

Curry-Funktionen verlieren in diesem Kontext ihren ursprünglichen Kontext. Wenn Sie eine Methode einer Klasse mit Currying verwenden müssen, verwenden Sie .bind(this) oder Pfeilfunktionen.


Fazit ?

Currying ist, als würde man sein Programmierspiel mit Cheat-Codes aufrüsten. Indem Sie Funktionen in kleinere, überschaubare Teile aufteilen, gewinnen Sie an Flexibilität, Lesbarkeit und Erfolgserlebnissen (oder zumindest weniger Debugging-Kopfschmerzen). Unabhängig davon, ob Sie ihn automatisieren oder von Hand schreiben, verwandelt Currying Ihren Code in ein sauberes, modulares Kraftpaket.

Wie Haskell Curry (der Mann hinter dem Namen) vielleicht gesagt hätte:

„Weniger schreiben, mehr tun … ein Argument nach dem anderen!“

Das obige ist der detaillierte Inhalt vonCurrying: Die modulare Superkraft von JavaScript freischalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn