Einführung in funktionales JavaScript (1)_Javascript-Kenntnisse

Stellen wir uns vor, wir müssten jetzt eine Aufgabe erledigen: JavaScript-Code so weit wie möglich nach den Prinzipien funktionaler Sprachen schreiben.

Die folgende Artikelserie soll es Ihnen ermöglichen, eine solche Reise mit mir zu beginnen. Zunächst müssen wir einige Missverständnisse über funktionale Sprachen korrigieren, die Sie möglicherweise im Kopf haben.

Funktionale Ausdrücke in der JS-Sprache werden ernsthaft missverstanden.

Offensichtlich gibt es eine ganze Reihe von Entwicklern, die täglich das Funktionsparadigma von JavaScript verwenden. Ich würde sagen, dass ein größerer Teil der JavaScript-Entwickler diese Dinge nicht wirklich versteht.

Ich denke, der Grund dafür ist, dass die meisten auf dem Webserver verwendeten Entwicklungssprachen von C abgeleitet sind und jeder weiß, dass diese Sprachen keine funktionalen Sprachen sind.

Im Allgemeinen gibt es zwei Ebenen der Verwirrung. Auf der ersten Ebene geht es um die Verwendung im folgenden Beispiel, die in jQuery sehr häufig verwendet wird:

$(".signup").click(function(event){
    $("#signupModal").show();
    event.preventDefault();
});

Im obigen Code übergeben wir eine anonyme Funktion als Parameter, die berüchtigte Rückruffunktion in JavaScript. Werden diese Funktionen aufgerufen? Gar nicht!

Das obige Beispiel veranschaulicht ein Schlüsselmerkmal funktionaler Sprachen: Eine Funktion ist ein Parameter. Andererseits verstößt dieses Beispiel gegen fast jedes funktionale Programmierparadigma, das in nur drei Codezeilen verletzt werden kann.

Die zweite Ebene der Verwirrung ist subtiler. Schauen Sie sich das an: So sehen sich nur eine Handvoll trendiger JS-Entwickler:

Hmm, das ist großartig! Aber ich verstehe die funktionale Programmierung bereits vollständig und verwende Underscore.js in allen meinen Projekten.

Underscore.js ist eine sehr bekannte und allgegenwärtige JavaScript-Bibliothek. Nehmen wir zum Beispiel an, ich habe eine Reihe von Wörtern und benötige die ersten beiden Buchstaben jedes Wortes. Dies ist sehr einfach mit Underscore.js zu schreiben:

var firstTwoLetters = function(words){
    return _.map(words,function(word){
        return _.first(word,2);
    });
};

Sehen Sie sich dieses JavaScript-Beispiel an. Ich habe die eleganten und praktischen Funktionen im funktionalen Stil verwendet: _.map und _.first. Was denken Sie darüber?

Obwohl Funktionen wie underscore.js und _.map nützliche Beispiele für das funktionale Paradigma sind, ist es für mich etwas verwirrend, sie wie dieses Beispiel zusammenzustellen. Müssen wir das wirklich tun?

Wenn wir darüber nachdenken, wie wir „funktionaler“ sein können, können wir das obige Beispiel vielleicht so umschreiben:

// ...a little bit of magic
var firstTwoLetters = map(first(2));

Denken Sie sorgfältig darüber nach, diese Codezeile hat den gleichen Effekt wie die 5 Zeilen oben. Viele Wörter sind nur Parameter oder Platzhalter. Die eigentliche Logik liegt darin, die Kartenfunktion, die erste Funktion und die Konstante 2 sinnvoll zu kombinieren.

Einige von Ihnen denken vielleicht: Was ist der Zauber an diesem Beispiel? Ein Beispiel als magisch zu bezeichnen, ist doch ein bisschen wie Angeberei, oder?

Ich habe vor, die nächsten beiden Artikel zu nutzen, um die Magie des obigen Beispiels zu erklären. Wenn Sie neugierig sind, können Sie weiterlesen.

Diese Blogreihe soll Ihnen dabei helfen, die Schönheit der funktionalen Programmierung auf Ihren JavaScript-Code anzuwenden.

Im nächsten Abschnitt werde ich verschiedene funktionale und nicht funktionale Elemente der JavaScript-Sprache diskutieren. Mit diesem Wissen können wir durch die Integration dieser Elemente langsam ein vollständiges System funktionaler Programmierung in unserem Kopf bilden und ihre Leistung in JavaScript verstehen.