Читать книгу Angular - Manfred Steyer - Страница 36

Logiken müssen bei JavaScript nicht in Form von Methoden innerhalb von Klassen gekapselt sein. Vielmehr unterstützt die Sprache des Webs auch allein stehende Funktionen. Wie Beispiel 2-5 veranschaulicht, kommt dazu das Schlüsselwort function zum Einsatz. Um anzuzeigen, dass eine Funktion keine Werte zurückliefert, verwendet sie den Datentyp void.

Beispiel 2-5: Eine einfache Funktion

// src/app/ts/demo.ts

function showFlight(f: Flight): void {

console.debug('---- Flight ----');

console.debug('id', f.id);

console.debug('date', f.from);

console.debug('date', f.to);

console.debug('date', f.date);

}

Ein Beispiel für die Nutzung dieser Funktion findet sich in Beispiel 2-6.

Beispiel 2-6: Funktionen nutzen

const anotherFlight: Flight = {

id: 1,

from: 'Graz',

to: 'Hamburg',

date: '2018-12-24T17:00:00.00+01:00'

}

showFlight(anotherFlight);

So richtig spannend wird es, wenn es um den Einsatz anonymer Funktionen geht. Damit sind Funktionen gemeint, die keinen Namen haben, jedoch an Ort und Stelle verwendet werden. Beispiel 2-7 spendiert zum Beispiel unserem FlightManager eine Methode search2, die die Array-Methode filter nutzt.

Beispiel 2-7: Anonyme Funktion

// src/app/ts/flight-manager.ts

import { Flight } from '../flight';

export class FlightManager {

constructor(private cache: Flight[]) {

}

search2(from: string, to: string): Flight[] {

const result: Flight[] = this.cache.filter(function (f: Flight) {

return f.from === from && f.to === to;

});

return result;

}

[...]

}

Die Funktion filter hat die Aufgabe, ein Array zu filtern, und nimmt die Filterkriterien in Form einer anonymen Funktion entgegen.

Sie ruft die übergebene anonyme Funktion für jeden Eintrag im Array auf. Liefert diese true, nimmt filter den jeweiligen Eintrag in die Ergebnisliste auf; ansonsten wird er außen vor gelassen. Das so ermittelte Ergebnis liefert filter zurück.

Eine verkürzte Schreibweise dafür bieten die mit ECMAScript 2015 eingeführten Lambda-Ausdrücke. Sie heißen offiziell Arrow-Funktionen, weil in ihnen der Pfeiloperator (=>) genutzt wird. Lambda-Ausdruck ist hingegen der sprachneutrale Name, der sich eingebürgert hat. Wie Beispiel 2-8 zeigt, ähnelt ein solcher Ausdruck der Nutzung anonymer Funktionen:

Beispiel 2-8: Lambda-Ausdruck

// src/app/ts/flight-manager.ts

search3(from: string, to: string): Flight[] {

return this.cache.filter((f: Flight) => {

return f.from === from && f.to === to;

});

}

Lediglich das Schlüsselwort function wird weggelassen, und als Trennzeichen zwischen Parameterliste und Body der Funktion kommt der Pfeiloperator (=>) zum Einsatz. Gelesen wird dieser Operator als goes to, was sich im Deutschen mit wird abgebildet auf übersetzen lässt. Sprachlich wurde das der Mathematik entlehnt, wo Funktionen Eingaben auf Ausgaben abbilden.

Die Schreibweise von Lambda-Ausdrücken lässt sich in manchen Fällen drastisch verkürzen. Beispiel 2-9 lässt beispielsweise die runden Klammern um die Parameter weg. Das ist möglich, wenn nur ein Parameter, dessen Typ hergeleitet wird, zum Einsatz kommt.

Beispiel 2-9: Kürzere Schreibweise für einen Lambda-Ausdruck

// src/app/ts/flight-manager.ts

search3(from: string, to: string): Flight[] {

return this.cache.filter(f => {

return f.from === from && f.to === to;

});

}

Beispiel 2-10 lässt sogar noch die geschweiften Klammern zur Begrenzung des Funktionskörpers sowie das Schlüsselwort return weg. Das ist möglich, wenn die Funktion nur aus einer einzigen Zeile besteht. In diesem Fall zieht ECMAScript 2015 das Ergebnis dieser Zeile als Rückgabewert heran.

Beispiel 2-10: Noch kürzere Schreibweise für einen Lambda-Ausdruck

// src/app/ts/flight-manager.ts

search3(from: string, to: string): Flight[] {

return this.cache.filter(f => f.from === from && f.to === to);

}

Neben der verkürzten Schreibweise bringen Lambda-Ausdrücke noch eine weitere Annehmlichkeit mit sich: Sie binden den Wert von this. Das bedeutet, dass this innerhalb des Lambda-Ausdrucks auf dasselbe Objekt wie außerhalb des Lambda-Ausdrucks zeigt. Für Entwickler aus der Welt von Java oder .NET ist das ohnehin das erwartete Verhalten. Erfahrene JavaScript-Entwicklerinnen und -Entwickler wissen jedoch, dass der Aufrufer einer Funktion den Wert von this bestimmt. Die Nutzung des Schlüsselworts function führt jedoch aus Gründen der Abwärtskompatibilität nach wie vor zu diesem etwas eigenwilligen Verhalten. Wer sich damit nicht belasten möchte, nutzt generell für Callback-Funktionen Lambda-Ausdrücke.