Blog

Funktionale Ausdrücke in JavaScript – einfach erklärt

Was jetzt kommt, ist für erfahrene JavaScript-Entwickler nichts Neues. Wer die Sprache aber gerade lernt, für den kommt jetzt wichtiges Basiswissen.

Diejenigen, die schon einmal mit funktionalen Sprachen wie Scala oder Haskell gearbeitet haben, wissen die Möglichkeit zu schätzen, einer Funktion statt eines Parameters einfach eine weitere Funktion zu übergeben, die zum Beispiel eine Berechnungsvorschrift darstellen kann.

Dies ist beispielsweise nützlich bei Listenoperationen, wenn die Werte der Liste zusätzlich noch vor der Weiterverarbeitung verändert werden sollen.

Ein Beispiel:

Wir suchen über eine Liste von Personen:

var persons = ['Walter', 'Jack', 'Hans', 'Fritz'];

Und möchten wissen, an welcher Stelle der Liste Walter steht. Das geht mit:

persons.indexOf('Walter');

So weit, so gut.

Nun erweitern wir unsere Liste um ein paar Daten. Die Strings werden dabei durch Objekte ersetzt.

var data = [
    {id_list: 1, name: 'Walter', score: 15000},
    {id_list: 2, name: 'Jack', score: 22000},
    {id_list: 3, name: 'Hans', score: 5000},
    {id_list: 4, name: 'Fritz', score: 12500}
]

Angenommen, wir möchten jetzt den Score von Walter ermitteln.

Mit unserem Ausdruck von oben kommen wir zunächst nicht weiter:

var index = data.indexOf('Walter');

Dies liegt daran, dass die indexOf-Methode ein Objekt erwartet, nach dem sie in der Liste suchen kann (Prüfung auf Objektidentität).

Der einfache Ansatz wäre jetzt, mit einer for-Schleife über die Liste zu iterieren und das Walter-Element zu suchen.

Solche Lösungsansätze finden sich übrigens sogar in Foren (siehe oben, vielleicht sollten das hier nicht nur Newbies lesen…). Das sieht erstens wenig elegant aus (wir möchten ja eleganten Quellcode abliefern) und zweitens erwartet man hier eigentlich einen Einzeiler. Die gute Nachricht: es geht kürzer. Die schlechte Nachricht: man muss ein bisschen um die Ecke denken.

Wir holen uns zunächst den Listenindex von Walter.

var waltersIndex = data.map(
  function(o) {
    return o.name; 
  }
).indexOf('Walter');

Was macht die Map-Funktion? Es handelt sich um eine sogenannte Funktion höherer Ordnung (Higher Order Function): solche Funktionen können als Parameter eine weitere Funktion entgegennehmen, welche in diesem Fall eine Berechnungsvorschrift für jedes einzelne Map-Element definiert. Hier soll von jedem Objekt nur der Namen zurückgegeben werden. Auf jedes Element angewandt, ergibt sich eine Liste von Namen, wie wir sie eingangs schon einmal benutzt haben.Auf dieser Liste kann dann die Suche nach dem Namen ausgeführt werden. Das Ergebnis ist ein Listenindex, der wiederum verwendet werden kann, um das komplette Objekt aus der ursprünglichen Liste zu holen.

var walter = data[waltersIndex];

Nun haben wir das Walter-Objekt, von dem nun nur noch der Score abgefragt werden braucht:

var waltersScore = walter.score;

So einfach haben wir mal eben funktional programmiert. Das Ganze lässt sich natürlich auch kürzer und eleganter darstellen. Weitere Optimierung sei dem Leser als Fingerübungen überlassen.

Viel Spaß dabei!

Holisticon AG — Teile diesen Artikel

Über den Autor

4 Kommentare

  1. Sehr schöner Artikel.
    Als Ergänzung: „indexOf“ wird von den alten IE-Browsern nicht unterstützt. Im clientseitigen Umfeld muss man da also ggf. einen Workaround bauen.

Antwort hinterlassen