JS – Teil 4: Funktionen

Nachdem wir uns letztes mal die Datentypen und das Hoisting angesehen haben geht es in diesem Artikel um JavaScript Funktionen. Als ein zentrales Element der Programmierung ist es wichtig, Funktionen möglichst frühzeitig zu verstehen und anwenden zu lernen. Der richtige Einsatz endet dabei in besser strukturiertem, lesbarerem und wartbarerem Code.

Was ist eine JavaScript Funktion?

Wenn wir in der Programmierung von Funktionen sprechen beschreibt das ein abgeschlossenes Stück Code welchem wir einen Namen geben. Mit diesem können wir dann unser Stück Code wieder und wieder aufrufen. Das hat gleich mehrere Vorteile:

  1. Wir sparen uns viel Arbeit.
    Eine Funktion kann theoretisch aus hunderten Zeilen Code bestehen – was sie allerdings nicht sollte. Diese hunderte von Zeilen können wir mit nur einem einzelnen Schlüsselwort an mehreren Stellen ausführen.
  2. Wir können unseren Code besser ändern / erweitern.
    Stellen wir uns vor wir kopieren denselben Codeblock an zehn Stellen in unser Script und bemerken danach, dass wir einen Fehler gemacht haben oder eine neue Anforderung zwingt uns, den Code anzupassen. Wir müssten dann also alle zehn Stellen suchen (und die Chance, eine zu vergessen, ist hoch) und die Änderung durchführen. Haben wir diesen Codeblock allerdings nur an einer Stelle – nämlich innerhalb der Funktion – ist die Änderung blitzschnell gemacht.
  3. Unser Code wird kleiner.
    Gerade im Web kommt es bei den Ladezeiten auf jedes Byte an. Da JavaScript Code im Browser ausgeführt wird muss er zuerst heruntergeladen werden, das bedeutet jede Zeile Code erhöht die Ladezeit ein wenig. Da ist es natürlich umso wertvoller, statt den Duzenden Zeilen Logik einfach nur einen Funktionsnamen übertragen zu müssen.
  4. Unser Code wird lesbarer und verständlicher.
    Gerade wenn man mit der Programmierung anfängt, ist es schwer, nachzuvollziehen, was ein Stück Code eigentlich macht. Aber auch später lässt das nicht nach. Es ist wahnsinnig umständlich, jedes mal zwanzig Zeilen Code zu lesen um herauszufinden, was sie eigentlich tun sollen. Wäre es nicht viel einfacher, einer Funktion einen aussagekräftigen Namen wie zum Beispiel calculateFinalPrice zu geben? Dadurch verstehen auch andere Programmierer auf den ersten Blick, was wir damit bezwecken.

 

Wir sehen also, Funktionen haben eine Menge Vorteile. Nicht umsonst kommen Programmiersprachen bereits mit einer großen Anzahl fertiger Funktionen geliefert was zum Beispiel das Arbeiten mit Arrays oder Mathematische Aufgaben angeht.

Jetzt wird es aber Zeit für ein Beispiel damit wir ein Gefühl dafür bekommen, wie so eine JavaScript Funktion denn nun aussieht.

 

 

Ein kleines Beispiel

Hier sehen wir: Funktionen sind gar nicht so kompliziert. Diese Funktion nimmt einfach eine Zahl (in der Variable price) und rechnet die Mehrwertsteuer darauf. Das Ergebnis dieser Berechnung wird zurückgegeben und kann dann weiter verwendet werden.

 

Woraus besteht eine Funktion?

Eine JavaScript Funktion besteht aus bis zu fünf Einzelteilen, die wir in diesem Kapitel genauer unter die Lupe nehmen werden:

  1. Das Schlüsselwort function
  2. Der Funktionsname (im Beispiel calculatePriceWithTax)
  3. Die Parameter (im Beispiel price)
  4. Einem Codeblock (der Teil in den geschweiften Klammern)
  5. Einem Rückgabewert (im Beispiel der Preis inklusive Mehrwertsteuer)

Was bedeuten diese einzelnen Teile nun und was sind ihre Besonderheiten? Schauen wir uns das genauer an.

 

 

Das Schlüsselwort function

Anhand des Schlüsselworts function erkennt der JavaScript Interpreter, was er zu tun hat. Er versteht, dass der darauf folgende Codeblock mehrfach ausführbar sein soll und speichert ihn daher unter dem vergebenen Namen ab. Genau wie zum Beispiel das Schlüsselwort var ist function also eine reine Anweisung für den Computer und absolut notwendig.

 

Der Funktionsname

Funktionsnamen sind eine tolle Sache. Sie verbessern die Lesbarkeit und haben gleichzeitig die Funktion (Wortspiel!) uns den Codeblock an anderen Stellen wieder ausführen zu lassen. Während der Funktionsname nicht absolut notwendig ist (anonyme Funktionen behandeln wir in einem anderen Artikel) sollten wir uns gerade am Anfang erstmal darauf konzentrieren, Funktionen wirklich zu verstehen bevor wir ihn weglassen.

Bei der Benamung einer Funktion ist es wichtig, sich ein wenig Gedanken zu machen und einen sprechenden Namen zu finden. Dieser sollte möglichst gut ausdrücken, wofür die Funktion da ist. Das hilft einerseits anderen Programmierern, wenn sie unseren Code lesen aber auch uns selbst, wenn wir nach einigen Tagen oder Wochen Pause wieder am selben Stück Code sitzen.

 

Die Parameter

Parameter sind ein wichtiger Teil der JavaScript Funktionen. Der Code innerhalb der Funktion verändert sich ja nicht aber trotzdem soll eine Funktion oft auf andere Umstände reagieren können.
Nehmen wir das Beispiel von oben: Die Funktion calculatePriceWithTax() reagiert auf einen Preis, der ihr von außen übergeben wird. Das bedeutet wir können die Funktion hundert mal aufrufen, jeweils mit einem anderen Preis, und das Ergebnis wird ein anderes sein. Und genau dafür sind Parameter gedacht: Wir übergeben einer JavaScript Funktion Werte von außerhalb und können diese Werte dann mit Hilfe der Parameter innerhalb der Funktion ansprechen.

Eine Besonderheit bei JavaScript im Gegensatz zu vielen anderen Programmiersprachen liegt in der Tatsache, dass die Anzahl der Parameter nicht überprüft wird. Das bedeutet ganz einfach wir könnten theoretisch eine Funktion mit zwei Parametern definieren, sie aber dann mit nur einem oder sogar drei Argumenten aufrufen. Was passiert dann?

  • Wird eine Funktion mit zuwenigen Argumenten aufgerufen erhalten die restlichen Parameter in der Liste den Wert undefined.
  • Wird eine Funktion jedoch mit zu vielen Argumenten aufgerufen werden die überzähligen einfach verworfen, das bedeutet sie stehen innerhalb der Funktion nicht zur Verfügung.

Innerhalb des Codeblocks können wir die Parameter dann wie ganz normale Variablen verwenden, allerdings sind diese auch nur innerhalb der geschweiften Klammern verfügbar. Diesen sogenannten Scope schauen wir uns in einem späteren Artikel auch noch gesondert an.

 

 

Der Codeblock

This is where the magic happens. Der Codeblock definiert, was eigentlich passieren soll, wenn wir unsere Funktion aufrufen. Dabei können wir innerhalb der Funktion alles programmieren was wir auch sonst machen würden – wir können Variablen definieren, Funktionen aufrufen (ja, sogar sich selbst kann die Funktion aufrufen, das nennt sich dann Rekursion) und sogar neue Funktionen definieren, die dann nur innerhalb unserer Hauptfunktion verfügbar sind. Klingt alles wahnsinnig kompliziert, ist es aber nur am Anfang – das geht schnell vorbei.

 

Der Rückgabewert

Ein weiterer (und gleichzeitig letzter) wichtiger Punkt für JavaScript Funktionen ist der Rückgabewert. Im Beispiel oben steht der Aufruf der Funktion hinter einem = Zeichen – das bedeutet es wird der Variable priceWithTax ein Wert zugewiesen. Aber welcher? Der Funktionsname?
Nein. Hier kommt der Rückgabewert ins Spiel. Wir können Funktionen an quasi allen Stellen aufrufen, an denen wir sonst Variablen benutzen. Wenn wir eine Variable verwenden rechnet der JavaScript Interpreter eigentlich mit dem Wert für den die Variable steht.
Das bedeutet einfach wenn wir eine Variable x mit dem Wert 10 haben und dann x + 5 rechnen steht das für 10 + 5.

Was aber wenn wir zum Beispiel die Funktion getX() haben und getX() + 5 rechnen? In diesem Fall wird der Rückgabewert der Funktion verwendet, der hinter dem return Schlüsselwort steht. Dieser Rückgabewert wird an die Stelle zurückgegeben, an der wir die aufrufen und ersetzt den Funktionsaufruf.

Ein paar Besonderheiten gibt es noch zu den Rückgabewerten, die wir beachten müssen:

  1. Eine Funktion kann mehrere return Statements enthalten (zum Beispiel durch verschiedene if Bedingungen abgetrennt), aber auch gar keines. Der Rückgabewert ist optional.
  2. Die Funktion wird abgebrochen sobald ein return Statement aufgerufen wird. Code, der nach diesem Statement steht, wird nicht mehr ausgeführt!

 

 

Soweit zu einer ersten Einführung in die Welt der JavaScript Funktionen. Hast du noch weitere Fragen zu diesem Thema oder eigene Anregungen? Hinterlass mir einen Kommentar unter dem Artikel.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*