Welche Pfeilfunktionen in JavaScript wirklich benötigen

Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels "Der wahre Grund, warum JavaScript Pfeilfunktionen hat" von Martin Novák.





* Meme Phrase aus dem Spiel Skyrim



Wenn Sie immer noch keine Pfeilfunktionen verwenden, geben Sie sich keine Vorwürfe - das ist die Aufgabe Ihrer Eltern. Denken Sie stattdessen über die Vorteile nach, die Sie als fleißiger Schüler nutzen können. Heute wird mein gesamter Code mit Pfeilfunktionen geschrieben.



Dies ist ein Beispiel für denselben Code, der ebenfalls im traditionellen Stil geschrieben wurde:



const arrowFunction = (arg1, arg2) => arg1 + arg 2;

const traditionalFunction = function(arg1, arg2) {
  return arg1 + arg2;
};


Möglicherweise stellen Sie fest, dass der Code beim Schreiben mit einer Pfeilfunktion viel kürzer ist. Alles, was vor dem Pfeil geschrieben wird, sind die Argumente, nachdem der Pfeil das zurückgegebene Ergebnis ist.

Wenn Sie eine Funktion benötigen, die mehrere Aktionen enthält, können Sie sie folgendermaßen schreiben:



const arrowFunction = (arg1, arg2) => {
  const result = arg1 + arg2;
  return result;
};


Pfeilfunktionen werden häufig auch als Lambda-Funktionen bezeichnet und nicht nur in JavaScript verwendet. Python ist ein gutes Beispiel dafür, wo auch Lambda-Funktionen auftreten.



In Python lautet ihre Syntax wie folgt:



lambdaFunction = lambda a, b : a + b


Vereinfachen



Die Verwendung von Pfeilfunktionen motiviert Sie, Ihren Code nach dem KISS-Prinzip (Keep-it-simple-dumm) und dem Prinzip der Einzelverantwortung (jede Funktion ist nur für eine bestimmte Aktion verantwortlich) zu vereinfachen.



Im Allgemeinen schreibe ich sie ohne geschweifte Klammern {}. Wenn eine Funktion schwer zu lesen ist oder Sie mehrere Ausdrücke verwenden müssen, empfehle ich Ihnen, sie in mehrere kleinere zu unterteilen.

Dieser Code ist einfacher zu schreiben, einfacher wiederzuverwenden und zu testen. Außerdem können Funktionen aussagekräftigere Namen erhalten, um die von ihnen ausgeführte Arbeit genau darzustellen.



Erstklassige Funktionen



JavaScript hat erstklassige Funktionen. Dies sind Funktionen, die wie reguläre Variablen verwendet werden. Sie können als Argumente für andere Funktionen fungieren oder diese als Ergebnis zurückgeben. Ein Beispiel, mit dem Sie wahrscheinlich vertraut sind:



document.querySelector('#myButton').addEventListner('click', function() {
  alert('click happened');
});


Hier wird eine anonyme Funktion gezeigt, die als Argument an addEventListener übergeben wird. Diese Methode wird in Javascript häufig für Rückrufe verwendet.



Ein Beispiel für die Rückgabe einer Funktion ist anders - siehe unten:



const myFirstClassFunction = function(a) {
  return function(b) {
    return a + b;
  };
};

myFirstClassFunction(1)(2); // => 3


Mit der Pfeilfunktion sieht jedoch alles viel sauberer aus:



const myFirstClassArrow = a => b => a + b;

myFirstClassArrow(1)(2); // => 3


Hier ist alles einfach: Was vor dem letzten Pfeil geschrieben steht, sind die Argumente und danach die Berechnung. Tatsächlich arbeiten wir mit mehreren Funktionen und können auch mehrere Aufrufe fn (call1) (call2) verwenden.



Teilanwendung



Sie können Pfeilfunktionen verwenden, um wie Legosteine ​​teilweise anwendbare Funktionen zu erstellen. Auf diese Weise können Sie benutzerdefinierte Funktionen erstellen, indem Sie ihnen bestimmte Argumente übergeben. Lassen Sie es uns im folgenden Beispiel aufschlüsseln:



const add = a => b => a + b;

const increaseCounter = counter => add(1)(counter);
increaseCounter(5); // => 6

const pointFreeIncreaseCounter = add(1);
pointFreeIncreaseCounter(5); // => 6


Dies ähnelt der Verwendung von Funktionen mit Standardvariablen, die teilweise Anwendung bietet jedoch mehr Flexibilität.



Diese Funktionen werden als Curry bezeichnet. Sie sind eine Folge von unären Funktionen und Monaden, die in der funktionalen Programmierung üblich sind.



Funktionsprogrammierung



Wie Sie vielleicht vermutet haben, ist der Hauptgrund für Pfeilfunktionen die funktionale Programmierung. Es ist ein deklaratives Stilparadigma, das auf der Zusammensetzung einfacher Funktionen basiert.



Funktionale Programmierung ist eine Alternative zu OOP, die von vielen Entwicklern (einschließlich des Autors des Artikels) bevorzugt wird. Sie können für jeden Stil argumentieren, aber ich denke, funktionale Programmierung ist cool und es sollte Ihnen unangenehm sein, nur zu denken, dass Sie einmal anders gedacht haben.



Reine Funktionen basieren nur auf Eingaben und geben immer einen Wert zurück. Sie ändern (mutieren) niemals andere Variablen und hängen nicht von externen Daten außerhalb der Eingabewerte ab. Dies führt zu referenzieller Transparenz, was die Programmierung erleichtert.



Und ja, es ist immer möglich, eine große Menge Code zu schreiben, ohne eine einzelne Variable zu ändern.



Wie Sie vielleicht bemerkt haben, dienen Pfeilfunktionen dazu, Daten zwischen Ein- und Ausgängen zu transformieren. Sie müssen nicht einmal einen kurzen Ausdruck ohne geschweifte Klammern zurückgeben.



Pfeilfunktionen - Fazit



Pfeilfunktionen verkürzen Ihre Syntax, verkürzen die Zeit zum Schreiben, Lesen und Testen Ihres Codes und vereinfachen ihn. Denken Sie darüber nach, denn höchstwahrscheinlich sind Sie ein fortgeschrittener Entwickler. Wenn Sie diese Tipps anwenden, werden Sie fortgeschrittener und erhöhen Ihre Relevanz. Funktionale Programmierung ist wirklich cool. Es macht Sie zu einem Künstler, der aus Code elegante Kurzfunktionen macht.



Echtes Funktionsbeispiel



Um zu verstehen, was im Kaninchenbau verborgen ist, schauen wir uns ein Beispiel für die Verwendung der Open-Source-Bibliothek @ 7urtle / lambda an



import {trim, upperCaseOf, lengthOf, lastLetterOf, includes, compose} from '@7urtle/lambda';

const endsWithPunctuation = input =>
  includes(lastLetterOf(input))('.?,!');

const replacePunctuationWithExclamation = input =>
  substr(lengthOf(input) - 1)(0)(input) + '!';

const addExclamationMark = input =>
  endsWithPunctuation(input)
    ? replacePunctuationWithExclamation(input)
    : input + '!';

const shout = compose(addExclamationMark, upperCaseOf, trim);

shout(" Don't forget to feed the turtle.");
// =>    !


Das Verwenden von Pfeilfunktionen und das Erlernen der funktionalen Programmierung macht süchtig. Auf diese Weise können Sie kürzeren Code mit besserer Leistung und Wiederverwendbarkeit schreiben.



JavaScript kann in seiner Inkonsistenz zwischen der Verwendung von C-ähnlicher Syntax und funktionalen Programmierfunktionen schwierig sein. Um den Menschen zu helfen, besser zu verstehen und Zugang zu Lernmaterialien zu erhalten, habe ich die @ 7urtle / Lambda-Bibliothek entwickelt. Sie können die funktionale Programmierung in Ihrem eigenen Tempo beherrschen und www.7urtle.com hilft Ihnen dabei, dieses Paradigma zu erlernen, indem es Ihnen alle Tools zur Verfügung stellt, die Sie benötigen.



All Articles