Javascript return
Der Aufruf von return führt dazu, dass die Funktion sofort verlassen und die Kontrolle an die aufrufende Funktion zurückgegeben wird.
Die return-Anweisung wird benutzt, um den Wert einer Berechnung an die aufrufende Funktion zu übermitteln. Die Funktion wird nicht weiter ausgeführt. Die return-Anweisung ist darum fast immer die letzte Anweisung in der Funktion, denn Anweisungen nach return sind unerreichbar.
function berechnen() {
// Anweisungen
┌────── let wert = summe( 15,85 ); ◀─────┐
│ // Anweisungen │
│ } │
│ │
└──────▶ function summe( x, y ) { │
let add = x + y; │
return add; ────────────────-┘
}
Eine Funktion kann mehrere return-Anweisungen enthalten. Trifft der Javascript-Interpreter auf ein return, bricht er die Ausführung der Funktion sofort ab und kehrt zum Aufruf der Funktion zurück.
function changeElem() {
if (!document.getElementById( 'fact' )) {
return;
}
let elem = document.getElementById( 'fact' );
// Verarbeitung
}
Javascript hat keinen void-Typ, so dass jede Funktion einen Rückgabewert haben muss. Der vorgegebene Rückgabewert ist undefined, nur bei Konstruktoren ist der vorgegebene Rückgabewert this.
Die einfache Prüfung am Anfang des Skripts (if (!document.getElementById( 'fact' ))) verhindert den wohl häufigsten Fehler in Skripten: den Zugriff auf ein nicht-existierendes Element. Findet die Funktion kein Element mit der id fact, beendet return die Funktion changeElem() sofort und der Javascript-Interpreter gibt die Kontrolle wieder an die aufrufende Funktion zurück.
Mit return mehrere Werte zurückgeben
return kann einzelne Werte, Objekte, Boolean und Funktionen zurückgeben. Hier gibt die Funktion beim Hovern mit der Maus oder bei einem touch-Event die Koordinaten der Maus oder des Fingers zurück.
Wenn return mehrere Werte zurückgeben soll, müssen sie in ein Array oder Objekt gesetzt werden.
Die Position der Maus oder des Fingers beim Touch ist eine Eigenschaft des Events, bei dem die Funktion aufgerufen wird. Der Aufruf von eventToXY muss darum das Event mitliefern.
let touchme = document.getElementById('touchme');
let xy = document.getElementById('xy');
mouse event ───┐
│
touchme.onmouseover = function (eve) {
xy.innerHTML = 'x ' + eventToXY (eve).x + ' y ' + eventToXY (eve).y;
}
touch event ───┐
│
touchme.ontouchstart = function (eve) {
xy.innerHTML = 'x ' + eventToXY (eve).x + ' y ' + eventToXY (eve).y;
}
Event ───┐
│
let eventToXY = function(e) {
let out = { x:0, y:0 };
if(e.type === 'touchstart'){
let touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
out.x = touch.pageX;
out.y = touch.pageY;
} else if ( e.type === 'mouseover' ) {
out.x = e.pageX;
out.y = e.pageY;
}
return out;
};
Wohin geht return?
Verwirrend für Einsteiger ist die Frage, wohin der Rückgabewert einer Funktion geliefert wird. Die goldene Regel für return ist:
- »Normale« Funktionen geben die Steuerung an die Stelle im Programm zurück, an der die Funktion aufgerufen wurde. Gibt eine Funktion einen Wert zurück, geht der Wert an die linke Seite der Anweisung: let simple = add( x, y );
- Event Handler geben die Steuerung an den Browser zurück. Jedes Event hat einen Rückgabewert, der standardmäßig auf true gesetzt ist.
return in Event Handlern
Als Event Handler werden Javascript-Funktionen bezeichnet, die bei einem bestimmten Ereignis aufgerufen werden – z.b. eine Funktion checkForm(), die beim Absenden eines Formulars die Eingaben des Benutzers prüft.
Event Handler geben per Default true zurück, was vom Browser als „führe jetzt die ursprüngliche Aktion durch“ interpretiert wird.
Der Rückgabewert von Event Handlern geht an den Browser, der anhand des return-Werts entscheidet, ob er die vorgegebene Funktion – z.B. das Absenden eines Formulars – durchführen soll. Wenn der Benutzer also „nein“ in das Eingabefeld schreibt, darf das Formular nicht abgeschickt werden. Das ist die Mimik für die Validierung von Formulareingaben.
HTML-Markup
<form id="handleForm" action="formaction" method="post">
<div>
Postleitzahl <input type="text" name="plz" id="plz" />
<em id="msg" style="color: red"> </em>
</div>
<p><input type="submit" value="Absenden" /></p>
</form>
Javascript onsubmit
const form = document.getElementById( 'handleForm' );
const eingabe = document.getElementById( 'plz' );
form.onsubmit = function () {
… bei gültiger Postleitzahl absenden:
return true;
… bei ungültiger Postleitzahl Fehler melden:
return false;
}
Der Event Handler onsubmit gibt per Vorgabe true zurück. Dann sendet der Brower die Formularwerte an die Anwendung auf dem Server.
Wenn das Ereignis onsubmit eintritt und die Funktion checkForm() false zurückgibt, wird dem Event Handler der Wert false zugewiesen und der Browser verschickt die Formularwerte nicht.
if (/^\d{5,5}$/.test( eingabe.value ) ) {
let text = document.createTextNode('Formular kann an …');
document.getElementById('msg').replaceChild(text,msg.firstChild);
return false; // in dieser Demo nicht absenden
//return true; in Produktionsumgebung Formular absenden
} else {
let text = document.createTextNode('Keine gültige Postleitzahl');
document.getElementById('msg').replaceChild(text,msg.firstChild );
return false; // Formular nicht absenden
}
</script>
Die anonyme Funktion form.onsubmit = function () {} liest den eingegebenen Wert und wenn die Eingabe eine fünfstellige Zahl ist (if (/^\d{5,5}$/.test( eingabe.value ))), ruft die Funktion return true; auf, damit der Browser die Formulareingaben an den Server überträgt. Bei allen anderen Eingaben verhindert return false; die Übermittlung der Formularwerte.
^\d{5,5}$ ist ein regulärer Ausdruck:
- Finde Vorkommen von mindestens 5 und maximal 5 Ziffern \d{5,5}
- die am Anfang des Suchstrings stehen ^Suchstring
- und am Ende des Suchstrings Suchstring$
