Wiederverwendbare Codeblöcke
Ja Umfangreicher das Programm wird, desto mehr Quelltext muss geschrieben werden.
Darum macht es Sinn, den Code in wiederverwendbare Teilstücke zu definieren. Dadurch können wir an beliebigen Stellen aus dem Programm immer wieder auf unsere Bausteine zugreifen, ohne diese jedes Mal neu zu schreiben. Gleichzeitig behalten wir dadurch auch den Überblick über den Code.
Funktionen
Eine Funktion wird mit dem Schlüsselwort "function" eingeleitet.
function zeigeText() {
console.log('Ich bin eine Funktion');
}
Auf das Schlüsselwort folgt der Name der Funktion und ein paar runde Klammern, die vorerst leer bleiben. Bei der Namensvergabe für Funktionen gelten dieselben Regeln wie bei der Namensvergabe für Variablen. Innerhalb der geschweiften Klammern folgt der Code, der ausgeführt werden soll, wenn die Funktion aufgerufen wird.
zeigeText();
Anonyme Funktionen
In JavaScript können auch sogenannte anonyme Funktionen erstellt werden.
let zeigeText = function() {
console.log('Ich bin eine Funktion');
}
In diesem Fall bewirkt der Aufruf "zeigeText" nicht, dass die Funktion aufgerufen wird, sondern dass die Variable "zeigeText" aufgerufen wird, die ja die Funktion beinhaltet.
Das liegt daran, weil die Funktion im Beispiel keinen eigenen Namen hat. Die Funktion wird aber trotzdem ausgeführt, weil sie der Variable zugewiesen wurde. Zurück zu unserer ersten Funktionsdeklaration und der Erklärung, was die Klammern da können.
Werte übergeben
In der Programmierung werden häufig bestimmte Werte (auch Argumente genannt) übergeben, um damit weiter zu arbeiten. So werden wir auch unsere Funktion leicht abwandeln, um ein übergebenes Argument ausgeben zu lassen.
function zeigeText(text) {
console.log(text);
}
zeigeText('Mein Wert wurde übergeben');
Wenn jetzt die Funktion "zeigeText" aufgerufen wird, dann wird ihr die Zeichenkette oder der String "Mein Wert wurde übergeben" mit übermittelt.
Dieser String ist jetzt ein Parameter zwischen den runden Klammern von der Funktion, und dieser wird dann über "console.log" ausgegeben.
Also erhalten wir die Ausgabe, die wir der Funktion mit übergeben haben.
Eine kurze Erläuterung zu den Begriffen "Argument" und "Parameter". Ein Argument ist ein Objekt, welches auf die übergebenen Parameter einer Funktion hinweist. Ein Parameter ist das Objekt, welches innerhalb der Klammern einer Funktion geschrieben steht. Funktionen können auch mehrere Argumente übergeben bekommen. Dabei werden die einzelnen Argumente einfach mit einem Komma voneinander getrennt.
function adresse(ort, strasse, hausnummer) {
console.log('Wohnort: ' + ort);
console.log('Strasse: ' + strasse);
console.log('Hausnummer: ' + hausnummer);
}
adresse('Berlin', 'Hauptstrasse', 20);
Jetzt übergeben wir unserer Funktion die 3 Argumente: "Berlin", "Strasse" und "Hausnummer". Und genau diese Argumente werden dann in der Konsole ausgegeben.
Wichtig ist hierbei, die Reihenfolge einzuhalten. Das erste Argument, welches Übergeben wird, also "Berlin" ist auch der erste Parameter in der Funktion, welches ausgewertet wird, also "ort".
Rückgabewerte
So wie Argumente an die Parameter einer Funktion übergeben werden können, so ist es auch möglich, Werte von einer Funktion zurückzubekommen.
Dieser Rückgabewert wird innerhalb einer Funktion mit dem Schlüsselwort "return" eingeleitet, darauf folgt der Wert, der zurückgegeben werden soll.
function addieren(x, y) {
let ergebnis = x + y;
return ergebnis;
}
console.log(addieren(2, 5));
Die Funktion "addieren" hat die beiden Parameter "x" und "y".
Innerhalb der Funktion haben wir die Variable "ergebnis", die das Ergebnis der Addition speichert.
Mit "return ergebnis" erzwingen wir eine Rückgabe des Additionsergebnisses.
Mit der Zeile console.log(addieren(2, 5)); übergeben wir der Funktion "addieren" die beiden Argumente "2" und "5", und zusätzlich erhalten wir in der Konsole direkt das Ergebnis der Addition.
Das Ganze kann auch in einer Kurzschreibweise dargestellt werden.
function addieren(x, y) {
return x + y;
}
console.log(addieren(2, 5));
Hierbei wird das Ergebnis nicht in einer Variablen zwischengespeichert, sondern wird direkt zurückgegeben.
Funktionen können aber nicht nur Zahlen, sondern auch: boolesche Werte, Zeichenketten, Arrays, Objekte und sogar Funktionen selber als Rückgabewerte liefern. Wir werden als Nächstes ein Objekt zurückgeben.
function baueAuto(marke, typ, baujahr) {
auto = {
marke: marke,
typ: typ,
baujahr: baujahr
}
return auto;
}
let fahrzeug = baueAuto('Opel', 'Insignia', 2016);
Nun werden die Argumente der Variable "fahrzeug" an der Funktion "baueAuto" weitergeleitet und diese Funktion erstellt daraus das Objekt "auto", welches wir mit "return" zurückgeliefert bekommen.
console.log(fahrzeug.marke);
console.log(fahrzeug.typ);
console.log(fahrzeug.baujahr);
Arrow-Funktionen
JavaScript hat seit ECMAScript2015 eine kurze Syntax für Anonyme-Callback-Funktionen. Dabei stehen als Erstes die Parameter der Funktion in runden Klammern, gefolgt vom Zuweisungsoperator mit dem größer als Zeichen => und darauf folgt der Funktionskörper. Die Kombination => soll ein Pfeil darstellen, wodurch die Arrow Funktion auch ihren Namen bekommen hat.
let quadrat = zahl => zahl * zahl;
Hier haben wir die Variable mit dem Namen "quadrat" definiert. "zahl" steht für den Parameter der anonymen Funktion. Im Funktionskörper rechnen wir "zahl" mal "zahl".
console.log(quadrat(6));
In der Konsole übergeben wir das Argument "6", wodurch uns direkt die Zahl "36" als Rückgabewert ausgeliefert wird.
Wenn mehr als nur ein Argument übergeben wird, dann werden die Parameter von runden Klammern umgeben.
let rechnen = (zahl1, zahl2) => zahl1 * zahl2;
console.log(rechnen(7, 4));
Funktionen in der Praxis einsetzen
Jetzt, wo wir so viel über Funktionen gelernt haben, wollen wir doch einfach mal sehen, wie wir sie später einsetzen können.
Dazu verwenden wir die HTML-Datei("index.html").
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>JavaScript lernen</title>
</head>
<body>
<div>
<div>
<label for="feld1">Geben Sie eine Zahl ein:</label>
<input id="feld1" type="text" value="0">
</div>
<div>
<label for="feld2">Geben Sie eine weitere Zahl ein:</label>
<input id="feld2" type="text" value="0">
</div>
<div>
<label for="ergebnis">Ergebnis:</label>
<input id="ergebnis" type="text">
<button onclick="addieren()">Summe berechnen</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>Hier erstellen wir 2 Eingabefelder, in denen jeweils die "0" als Platzhalter vorgegeben ist. Beide sind mit dem Hinweis markiert, dass hier jeweils eine Zahl eingegeben werden soll. Darunter ist ein drittes Feld, in dem das Ergebnis der Berechnung erscheinen soll, wenn der User den Button zur Berechnung tätigt. Der JavaScript Code dazu sieht folgendermaßen aus.
function addieren() {
let x = parseInt(document.getElementById('feld1').value);
let y = parseInt(document.getElementById('feld2').value);
let ergebnis = document.getElementById('ergebnis');
ergebnis.value = x + y;
}
So oder so ähnlich sollte das Ergebnis aussehen.
Bei Betätigung des Buttons werden die beiden Argumente von "feld1" und "feld2" durch die Methode "parseInt" als Zahl eingelesen und von der Funktion miteinander addiert.
Das Ergebnis wird in der Variable ergebnis gespeichert und an das dritte Feld mit der id "ergebnis" übertragen.
Durch die Methode "parseInt" können auch Hexadezimalzahlen eingegeben werden.
Funktionen als Referenztypen
In JavaScript sind Funktionen Objekte, das bedeutet, Funktionen können wie Variablen als Argumente oder Rückgabewerte anderer Funktionen verwendet werden.
Funktionen verfügen wie andere Objekte auch über verschiedene Methoden, die auf andere Funktionsobjekte aufgerufen werden können.
Funktionen als Argumente
In JavaScript können Funktionen als Argument einer anderen Funktion übergeben werden. Das bedeutet, dass eine Funktion ein Parameter erwartet, der wiederum selber eine Funktion ist, die aufgerufen wird. Dieser Funktion übergeben wir dann eine andere Funktion. Als Ersten betrachten wir die Funktion.
function hausVerlassen() {
console.log('Haus wird verlassen');
arbeiten();
console.log('Haus wird betreten');
}
function arbeiten() {
console.log('Arbeitsbeginn');
console.log('Arbeitsende');
}
hausVerlassen();
Beim Aufrufen der Funktion "hausVerlassen" wird eine Konsolenausgabe erzeugt. Danach wird die Funktion "arbeiten" aufgerufen und ausgeführt. Wenn die Anweisungen der Funktion "arbeiten" ausgeführt wurden, dann wird die letzte Konsolenausgabe der Funktion "hausVerlassen" ausgegeben. Nun übergeben wir der Funktion "hausVerlassen" ein Parameter, der selber eine Funktion ist.
function hausVerlassen(f) {
console.log('Haus wird verlassen');
f();
console.log('Haus wird betreten');
}
function arbeiten() {
console.log('Arbeitsbeginn');
console.log('Arbeitsende');
}
hausVerlassen(arbeiten);
Die Funktion "f" wird nach der ersten Konsolenausgabe ausgeführt und bekommt dabei die Variable "arbeiten" übergeben.
Genauso gut könnten wir mit anonyme Funktionen arbeiten.
function hausVerlassen(f) {
console.log('Haus wird verlassen');
f();
console.log('Haus wird betreten');
}
hausVerlassen(function() {
console.log('Arbeitsbeginn');
console.log('Arbeitsende');
});
Weil wir hier mit einer anonymen Funktion arbeiten, benötigen wir die Variable "arbeiten" nicht mehr.
Funktionen als Rückgabewert
Funktionen können auch als Rückgabewert anderer Funktionen verwendet werden.
function quadratmeterErstellen() {
return function(a, b) {
return a * b;
}
}
let qmRaum1 = quadratmeterErstellen();
let qmRaum2 = quadratmeterErstellen();
let qmRaum3 = quadratmeterErstellen();
console.log(qmRaum1(4, 7));
console.log(qmRaum2(3, 8));
console.log(qmRaum3(6, 2.5));
Im Beispiel erstellen wir die Funktion "quadratmeterErstellen", die eine anonyme Funktion erstellt. Die anonyme Funktion gibt die Berechnung der Werte "a" multipliziert mit "b" wieder zurück an die Funktion "quadratmeterErstellen". Dann können wir wie gewohnt die Werte über die Konsole ausgeben lassen.
Wir können eine Funktion, die eine andere Funktion als Rückgabewert liefert, auch direkt aufrufen, ohne ihr eine Variable zuzuweisen.
console.log(quadratmeterErstellen()(5, 9));
Weiter mit Fehler