84 Kapitel 3
Wie Funktionen ticken
function bark(name, weight) {
if (weight > 20) {
console.log(name + " sagt WAU WAU");
} else {
console.log(name + " sagt wau wau");
}
}
bark("rover", 23);
bark("spot", 13);
bark("spike", 53);
bark("lady", 17);
Schön, aber wie funktioniert das überhaupt?
Zunächst müssen wir unseren Code für die neue bark-Funktion anpassen:
Das ist schon deutlich weniger Code. Und für Ihren Mitarbeiter, der »mal eben«
Ihren Code anpassen soll, ist er auch noch viel besser lesbar. Außerdem haben wir
die Logik an einer sinnvollen Stelle zusammengefasst.
So weit, so gut. Aber wie passt das alles zusammen, und wie funktioniert es? Gehen
wir Schritt für Schritt vor.
function bark(name, weight) {
if (weight > 20) {
console.log(name + "
sagt WAU WAU");
} else {
console.log(name + "
sagt wau wau");
}
}
Zuerst haben wir die Funktion.
Jetzt steht die bark-Funktion direkt am Anfang des
Codes. Der Browser liest den Code, erkennt ihn
als eine Funktion und sieht sich dann den Code
im Funktionskörper an. Der Browser weiß, dass er
diese Anweisungen jetzt noch nicht ausführen soll.
Er wartet, bis die Funktion von einer anderen Stelle
des Programms aufgerufen wird.
Beachten Sie auch, dass die Funktion mit Para-
metern ausgestattet ist. Das heißt, sie übernimmt den
Namen und das Gewicht eines Hundes. Dadurch
können Sie die Funktion mit beliebig vielen ver-
schiedenen Hunden aufrufen. Hierbei verwendet
die Logik den im Funktionsaufruf übergebenen
Namen und das Gewicht.
Dies sind wieder die Parameter. Ihnen
werden die beim Funktionsaufruf
übergebenen Werte zugewiesen.
Und alles innerhalb der
geschweiften Klammern ist
der Körper der Funktion.
Wow! Das ist echt einfach!
Sehr schön. Die
gesamte Codelogik
ist an einer Stelle
zusammengefasst.
Der redundante Code besteht jetzt nur noch aus Aufrufen unserer
Funktion, der wir jeweils Name und Gewicht des Hundes übergeben.
Sie sind hier � 85
Einführung in Funktionen
function bark(name, weight) {
if (weight > 20) {
console.log(name + "
sagt WAU WAU");
} else {
console.log(name + "
sagt wau wau");
}
}
Jetzt wollen wir die Funktion aufrufen.
Um eine Funktion aufzurufen, reicht es, ihren Namen, eine
öffnende runde Klammer, die zu übergebenden Werte und
eine schließende runde Klammer zu schreiben (vergessen
Sie nicht das Semikolon am Ende!). Die Werte innerhalb
der Klammern sind die Argumente. Für die bark-Funktion
brauchen wir zwei Argumente: den Namen des Hundes
und sein Gewicht.
Und so funktioniert der Aufruf:
bark("rover", 23);
Hier übergeben wir zwei
Argumente: den Namen
und das Gewicht.
Beim Aufruf der bark-Funktion
werden die Argumente den
Parameternamen zugewiesen.
Und jedes Mal, wenn die
Parameter in der Funktion
auftauchen, werden die von uns
übergebenen Werte benutzt.
Unser Funktionsname.
"rover"
23
Nach dem Funktionsaufruf
erledigt der Funktionskörper
die ganze Arbeit.
Nachdem wir die Werte der Parameter kennen
– der Name ist beispielsweise »rover« und das
Gewicht ist 23 –, können wir den Funktionskör-
per ausführen.
Anweisungen im Funktionskörper werden von
oben nach unten ausgeführt, wie sonst auch in
Ihrem Code. Der einzige Unterschied ist, dass
den Parametern name und weight die beim
Funktionsaufruf übergebenen Werte zugewiesen
werden.
Nachdem wir den Parametern die Werte der
Argumente zugewiesen haben, werden die
Anweisungen im Funktionskörper ausgeführt.
function bark(name, weight) {
if (weight > 20) {
console.log( dogName + "
sagt WAU WAU");
} else {
console.log( dogName + "
sagt wau wau");
}
}
"rover"
23
"rover"
Die Parameter verhalten sich wie Variablen,
denen beim Funktionsaufruf die Werte der
Argumente zugewiesen wurden.
Im Englischen sagt man auch »to invoke a
function« — eine Funktion »heraufbe-
schwören«. Aber das nur am Rande …
86 Kapitel 3
Übung zu Funktionen
Und nach getaner Arbeit … Die
Logik des Körpers ist zu Ende ausgeführt (hier
sehen Sie, dass Rover mit einem Gewicht von 23
ein lautes »WAU WAU« ausgibt). Damit hat die
Funktion ihr Werk vollendet, und die Kontrolle
wird an die Anweisung weitergereicht, die auf
unseren Aufruf von bark folgt.
function bark(name, weight) {
if (weight > 20) {
console.log(name + " sagt WAU WAU");
} else {
console.log(name + " sagt wau wau");
}
}
bark("rover", 23);
bark("spot", 13);
bark("spike", 53);
bark("lady", 17);
"rover sagt WAu WAU"
Wird die Funktion beendet, wird die nächste Codezeile
nach dem Funktionsaufruf ausgeführt.
Hier rufen wir die Funktion erneut auf, allerdings mit
anderen Argumenten, und der Prozess beginnt von Neuem!
Dies war
unser
Aufruf …
… und das
kommt jetzt.
bark("juno", 20);
bark("scottie", -1);
bark("dino", 0, 0);
Unten sehen Sie weitere Aufrufe unserer bark-Funktion. Schreiben Sie neben den Aufruf, wie die
Ausgabe Ihrer Meinung nach aussehen sollte oder ob der Code vielleicht einen Fehler verursacht.
Bevor Sie weiterlesen, überprüfen Sie Ihre Antworten am Ende dieses Kapitels.
Schreiben Sie auf,
was die Konsole
Ihrer Meinung
nach ausgibt.
Haben Sie
irgendeine Idee,
was diese Aufrufe
tun?
bark("fido", "20");
bark("lady", 10);
bark("bruno", 21);
Benutzen Sie die Entwicklerwerkzeuge Ihres Browsers, um
die Ausgaben der bark-Funktion auf der Konsole zu sehen.
Spitzen Sie Ihren Bleistift
Get JavaScript-Programmierung von Kopf bis Fuß now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
