11 KiB
JavaScript-Grundlagen: Methoden und Funktionen
Sketchnote von Tomomi Imura
Quiz vor der Vorlesung
Wenn wir über das Schreiben von Code nachdenken, möchten wir immer sicherstellen, dass unser Code lesbar ist. Auch wenn das zunächst widersprüchlich klingt, wird Code viel häufiger gelesen als geschrieben. Ein wichtiges Werkzeug im Werkzeugkasten eines Entwicklers, um wartbaren Code zu gewährleisten, ist die Funktion.
🎥 Klicken Sie auf das Bild oben, um ein Video über Methoden und Funktionen anzusehen.
Sie können diese Lektion auf Microsoft Learn absolvieren!
Funktionen
Im Kern ist eine Funktion ein Codeblock, den wir bei Bedarf ausführen können. Das ist ideal für Szenarien, in denen wir dieselbe Aufgabe mehrfach ausführen müssen; anstatt die Logik an mehreren Stellen zu duplizieren (was die Aktualisierung später erschweren würde), können wir sie an einem zentralen Ort bündeln und sie immer dann aufrufen, wenn wir die Operation ausführen möchten – Sie können sogar Funktionen aus anderen Funktionen aufrufen!
Ebenso wichtig ist die Möglichkeit, einer Funktion einen Namen zu geben. Auch wenn das trivial erscheinen mag, bietet der Name eine schnelle Möglichkeit, einen Abschnitt des Codes zu dokumentieren. Sie können sich das wie ein Etikett auf einem Knopf vorstellen. Wenn ich auf einen Knopf klicke, auf dem "Timer abbrechen" steht, weiß ich, dass er die Uhr anhalten wird.
Erstellen und Aufrufen einer Funktion
Die Syntax für eine Funktion sieht wie folgt aus:
function nameOfFunction() { // function definition
// function definition/body
}
Wenn ich eine Funktion erstellen möchte, um eine Begrüßung anzuzeigen, könnte sie so aussehen:
function displayGreeting() {
console.log('Hello, world!');
}
Wann immer wir unsere Funktion aufrufen (oder ausführen) möchten, verwenden wir den Namen der Funktion, gefolgt von (). Es ist erwähnenswert, dass unsere Funktion vor oder nach ihrem Aufruf definiert werden kann; der JavaScript-Compiler wird sie für Sie finden.
// calling our function
displayGreeting();
NOTE: Es gibt eine spezielle Art von Funktion, die als Methode bekannt ist und die Sie bereits verwendet haben! Tatsächlich haben wir dies in unserem obigen Beispiel gesehen, als wir
console.logverwendet haben. Der Unterschied zwischen einer Methode und einer Funktion besteht darin, dass eine Methode an ein Objekt angehängt ist (in unserem Beispielconsole), während eine Funktion frei schwebend ist. Viele Entwickler verwenden diese Begriffe jedoch synonym.
Best Practices für Funktionen
Es gibt einige Best Practices, die Sie beim Erstellen von Funktionen beachten sollten:
- Verwenden Sie wie immer aussagekräftige Namen, damit Sie wissen, was die Funktion tun wird.
- Verwenden Sie camelCasing, um Wörter zu kombinieren.
- Halten Sie Ihre Funktionen auf eine spezifische Aufgabe fokussiert.
Informationen an eine Funktion übergeben
Um eine Funktion vielseitiger zu machen, möchten Sie oft Informationen an sie übergeben. Wenn wir unser Beispiel displayGreeting betrachten, wird es nur Hello, world! anzeigen. Nicht die nützlichste Funktion, die man erstellen könnte. Wenn wir sie etwas flexibler gestalten möchten, z. B. indem wir jemandem erlauben, den Namen der Person anzugeben, die begrüßt werden soll, können wir einen Parameter hinzufügen. Ein Parameter (auch manchmal als Argument bezeichnet) ist zusätzliche Information, die an eine Funktion gesendet wird.
Parameter werden im Definitionsabschnitt in Klammern aufgelistet und durch Kommas getrennt, wie folgt:
function name(param, param2, param3) {
}
Wir können unser displayGreeting aktualisieren, um einen Namen zu akzeptieren und diesen anzuzeigen.
function displayGreeting(name) {
const message = `Hello, ${name}!`;
console.log(message);
}
Wenn wir unsere Funktion aufrufen und den Parameter übergeben möchten, geben wir ihn in den Klammern an.
displayGreeting('Christopher');
// displays "Hello, Christopher!" when run
Standardwerte
Wir können unsere Funktion noch flexibler gestalten, indem wir weitere Parameter hinzufügen. Aber was, wenn wir nicht möchten, dass jeder Wert angegeben werden muss? Bleiben wir bei unserem Begrüßungsbeispiel: Wir könnten den Namen als erforderlich belassen (wir müssen wissen, wen wir begrüßen), aber wir möchten erlauben, dass die Begrüßung selbst nach Wunsch angepasst wird. Wenn jemand sie nicht anpassen möchte, stellen wir stattdessen einen Standardwert bereit. Um einem Parameter einen Standardwert zu geben, setzen wir ihn ähnlich wie bei einer Variablen – parameterName = 'defaultValue'. Ein vollständiges Beispiel:
function displayGreeting(name, salutation='Hello') {
console.log(`${salutation}, ${name}`);
}
Wenn wir die Funktion aufrufen, können wir dann entscheiden, ob wir einen Wert für salutation festlegen möchten.
displayGreeting('Christopher');
// displays "Hello, Christopher"
displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"
Rückgabewerte
Bis jetzt wird die von uns erstellte Funktion immer an die Konsole ausgeben. Manchmal kann dies genau das sein, was wir suchen, insbesondere wenn wir Funktionen erstellen, die andere Dienste aufrufen werden. Aber was, wenn ich eine Hilfsfunktion erstellen möchte, um eine Berechnung durchzuführen und den Wert zurückzugeben, damit ich ihn anderswo verwenden kann?
Das können wir mit einem Rückgabewert tun. Ein Rückgabewert wird von der Funktion zurückgegeben und kann genauso in einer Variablen gespeichert werden, wie wir einen Literalwert wie eine Zeichenkette oder Zahl speichern könnten.
Wenn eine Funktion etwas zurückgibt, wird das Schlüsselwort return verwendet. Das Schlüsselwort return erwartet einen Wert oder eine Referenz dessen, was zurückgegeben wird, wie folgt:
return myVariable;
Wir könnten eine Funktion erstellen, um eine Begrüßungsnachricht zu erstellen und den Wert an den Aufrufer zurückzugeben.
function createGreetingMessage(name) {
const message = `Hello, ${name}`;
return message;
}
Beim Aufrufen dieser Funktion speichern wir den Wert in einer Variablen. Das ist ähnlich wie wenn wir eine Variable auf einen statischen Wert setzen (z. B. const name = 'Christopher').
const greetingMessage = createGreetingMessage('Christopher');
Funktionen als Parameter für Funktionen
Im Laufe Ihrer Programmierkarriere werden Sie auf Funktionen stoßen, die Funktionen als Parameter akzeptieren. Dieser clevere Trick wird häufig verwendet, wenn wir nicht wissen, wann etwas passieren oder abgeschlossen sein wird, aber wir wissen, dass wir eine Operation als Reaktion darauf ausführen müssen.
Als Beispiel betrachten Sie setTimeout, das einen Timer startet und Code ausführt, wenn er abgeschlossen ist. Wir müssen ihm mitteilen, welchen Code wir ausführen möchten. Klingt nach einem perfekten Job für eine Funktion!
Wenn Sie den untenstehenden Code ausführen, sehen Sie nach 3 Sekunden die Nachricht 3 seconds has elapsed.
function displayDone() {
console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);
Anonyme Funktionen
Schauen wir uns noch einmal an, was wir gebaut haben. Wir erstellen eine Funktion mit einem Namen, die nur einmal verwendet wird. Wenn unsere Anwendung komplexer wird, können wir uns vorstellen, viele Funktionen zu erstellen, die nur einmal aufgerufen werden. Das ist nicht ideal. Wie sich herausstellt, müssen wir nicht immer einen Namen angeben!
Wenn wir eine Funktion als Parameter übergeben, können wir darauf verzichten, sie im Voraus zu erstellen, und stattdessen eine direkt als Teil des Parameters erstellen. Wir verwenden das Schlüsselwort function, aber erstellen sie direkt als Parameter.
Lassen Sie uns den obigen Code umschreiben, um eine anonyme Funktion zu verwenden:
setTimeout(function() {
console.log('3 seconds has elapsed');
}, 3000);
Wenn Sie unseren neuen Code ausführen, werden Sie feststellen, dass wir die gleichen Ergebnisse erhalten. Wir haben eine Funktion erstellt, mussten ihr aber keinen Namen geben!
Fat Arrow-Funktionen
Eine Abkürzung, die in vielen Programmiersprachen (einschließlich JavaScript) üblich ist, ist die Möglichkeit, sogenannte Arrow- oder Fat Arrow-Funktionen zu verwenden. Sie verwenden einen speziellen Indikator =>, der wie ein Pfeil aussieht – daher der Name! Mit => können wir das Schlüsselwort function überspringen.
Lassen Sie uns unseren Code noch einmal umschreiben, um eine Fat Arrow-Funktion zu verwenden:
setTimeout(() => {
console.log('3 seconds has elapsed');
}, 3000);
Wann welche Strategie verwenden?
Sie haben nun gesehen, dass wir drei Möglichkeiten haben, eine Funktion als Parameter zu übergeben, und fragen sich vielleicht, wann welche verwendet werden sollte. Wenn Sie wissen, dass Sie die Funktion mehr als einmal verwenden werden, erstellen Sie sie wie gewohnt. Wenn Sie sie nur für eine bestimmte Stelle verwenden, ist es in der Regel am besten, eine anonyme Funktion zu verwenden. Ob Sie eine Fat Arrow-Funktion oder die traditionellere function-Syntax verwenden, bleibt Ihnen überlassen, aber Sie werden feststellen, dass die meisten modernen Entwickler => bevorzugen.
🚀 Herausforderung
Können Sie in einem Satz den Unterschied zwischen Funktionen und Methoden erklären? Versuchen Sie es!
Quiz nach der Vorlesung
Überprüfung & Selbststudium
Es lohnt sich, etwas mehr über Arrow-Funktionen zu lesen, da sie zunehmend in Codebasen verwendet werden. Üben Sie das Schreiben einer Funktion und das anschließende Umschreiben mit dieser Syntax.
Aufgabe
Haftungsausschluss:
Dieses Dokument wurde mithilfe des KI-Übersetzungsdienstes Co-op Translator übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.