Robert Whitney
JavaScript-Funktionen – Inhaltsverzeichnis:
Bis jetzt haben wir ziemlich wichtige Aspekte von JavaScript sowie einige der häufigsten Best Practices beim Programmieren gesehen, die wir befolgen sollten. Diese sogenannten Praktiken sind aus einem bestimmten Grund vorhanden, und wenn wir sie anwenden, werden sie uns viele Fehler und Frustrationen ersparen, mit denen wir sonst konfrontiert wären. Eine der besten Praktiken, die wir gesehen haben, war das Befolgen des DRY-Prinzips, das im Grunde besagt: Wiederhole dich nicht. Eine Möglichkeit, wie wir dieses Prinzip angewendet haben, war die Verwendung von Schleifen in unserem Programm, genauer gesagt haben uns „for-Schleifen“ viel Zeit und Code gespart. In diesem Tutorial werden wir einen weiteren wichtigen Baustein in der Programmierung sehen, und er wird „Funktionen“ genannt.
Arten von JavaScript-Funktionen
Funktionen sind in der Programmierung äußerst verbreitet, und das gilt auch für JavaScript. Tatsächlich sind sie so verbreitet, dass einige JavaScript-Frameworks wie React darauf aufgebaut sind, JavaScript-Funktionen als grundlegenden Baustein zur Erstellung des Frontends von Websites zu nutzen. Und sie haben das aus gutem Grund getan. JavaScript-Funktionen bieten eine hohe Flexibilität und gleichzeitig hochgradig vorhersehbaren und modularen Code. Das führt zu viel klarerem Code mit weniger Wiederholungen und viel weniger Fehlern. Eines der ersten Dinge, die Sie über Funktionen wissen sollten, ist, dass es zwei Hauptarten von Funktionen gibt. Nämlich „reine Funktionen“ und „unreine Funktionen“. Allgemein gesagt, wollen wir so oft wie möglich reine Funktionen verwenden. Reine Funktionen bieten mehrere Vorteile, die sie im Vergleich zu unreinen Funktionen viel einfacher zu handhaben machen. Lassen Sie uns zuerst reine JavaScript-Funktionen betrachten und dann auch in unreine Funktionen eintauchen.
Reine Funktionen in JavaScript
Reine Funktionen sind im Wesentlichen Funktionen, die bestimmten Regeln folgen. Und weil sie diese Regeln befolgen, sind sie hochgradig vorhersehbar, einfacher zu debuggen in einem größeren System, modular und bieten einige andere Vorteile.
Eine reine Funktion erhält einige Eingaben und gibt einige Ausgaben zurück. Sie verändert die Eingaben nicht direkt und interagiert auf keine andere Weise mit der Umgebung. Das heißt, sie sendet Ihnen keine Warnungen, gibt Ihnen keine Meldung, während sie etwas anderes tut, oder interagiert auf keine andere Weise mit ihrer Umgebung.
Auf diese Weise wissen Sie, dass Sie, wenn Sie mit einer reinen Funktion arbeiten, unabhängig davon, wo oder wann Sie Ihren Code ausführen, solange Sie die gleichen Eingaben geben, die gleichen Ausgaben erhalten. Lassen Sie uns das mit einigen Beispielen sehen.
// verdopple die ursprüngliche Zahl
function double(num){
return num * 2;
}
// verdreifache die ursprüngliche Zahl
function triple(num){
return num * 3;
}
// addiere 100 zur ursprünglichen Zahl
function add100(num){
return num + 100;
}
// addiere zwei Zahlen
function addTwoNums(num1, num2){
const sum = num1 + num2;
return sum;
}
// multipliziere zwei Zahlen
function multiplyTwoNums(num1, num2){
const total = num1 * num2;
return total;
}
Alle oben genannten JavaScript-Funktionen sind reine Funktionen. Bei näherer Betrachtung haben Sie möglicherweise das Muster gesehen, das wir beim Erstellen reiner Funktionen verwenden. Der erste Schritt besteht darin, das Schlüsselwort „function“ zu schreiben, um JavaScript mitzuteilen, dass wir eine Funktion definieren möchten.
Als nächstes geben wir der Funktion einen Namen, vorzugsweise sollte dieser Name kurz, aber dennoch aussagekräftig genug sein, damit jemand, der vorbeikommt, versteht, was die Funktion tut. Wenn wir beispielsweise 100 zu einer Zahl hinzufügen, können wir die Funktion „add100“ nennen, wenn wir eine Zahl verdoppeln, können wir die Funktion „double“ nennen und so weiter.
Sobald wir die Funktion angemessen benannt haben, besteht der nächste Schritt darin, ihr einige Eingaben zu geben. Wir geben die Eingaben in Klammern an, und wenn wir mehrere Eingaben haben, trennen wir sie durch ein Komma. So wie wir es bei der Funktion „multiplyTwoNums“ gemacht haben. (Außerdem, als Randnotiz, werden Zahlen in der Programmierung häufig als „nums“ abgekürzt, sodass wir, wenn wir eine Funktion benennen, dieses allgemeine Wissen nutzen können, um kurze, aber aussagekräftige Funktionsnamen zu haben.)
Die Eingaben, die wir der Funktion geben, werden auch häufig als „Parameter“ bezeichnet. Wenn wir die JavaScript-Funktionen erstellen, entscheiden wir, wie viele Parameter die Funktion haben wird. Wenn wir uns entscheiden, die Funktion zu verwenden, geben wir diesen Parametern „Werte“ an. Diese Werte, die wir bei der Verwendung der Funktion angeben, werden auch häufig als „Argumente“ bezeichnet. Wenn wir also eine Eingabe für die Funktion bereitstellen, wird dieser Prozess auch als „Übergabe von Argumenten“ an eine Funktion bezeichnet. Lassen Sie uns einige Beispiele dafür sehen.
// Zuerst definieren wir die Funktion, die eine Zahl nimmt
// und sie mit 10 multipliziert
function multiplyBy10(num1){
return num1 * 10;
}
// jetzt rufen wir diese Funktion auf // speichern das Ergebnis in einer Konstante // und zeigen die Ergebnisse an const bigNum = multiplyBy10(3); alert(bigNum); // num1 ist hier der Parameter. // wir haben den Wert 3 als Argument an die Funktion übergeben. // wir haben die Ergebnisse der Funktion // in einer Konstante namens bigNum gespeichert. // wir haben die Konstante bigNum dem Benutzer angezeigt.
Wie Sie im obigen Code gesehen haben, selbst wenn wir etwas dem Benutzer anzeigen möchten, halten wir die Funktion von der Alert-Funktion getrennt. Wenn wir die Ergebnisse dem Benutzer innerhalb der Funktion anzeigen würden, würde dies erfordern, dass die Funktion mit anderen Teilen des Computers interagiert, und würde unsere Funktion unreine machen. Allgemein gesagt, wollen wir die Funktionen verwenden, um ihnen Eingaben zu geben und einen zurückgegebenen Wert zu erwarten. Wenn wir diesen zurückgegebenen Wert erhalten, können wir ihn tatsächlich anzeigen oder andere JavaScript-Funktionen damit ausführen, je nach unseren Bedürfnissen, aber der Punkt ist, die Belange der Anzeige der Ergebnisse und der Berechnung der Ergebnisse getrennt zu halten.
Bis jetzt haben wir gesehen, dass wir das Schlüsselwort „function“ verwenden können, um mit der Deklaration der Funktion zu beginnen, dann benennen wir die Funktion angemessen, dann öffnen und schließen wir die Klammern und sagen der Funktion, welche Parameter sie benötigt, dann öffnen wir geschweifte Klammern und sagen der Funktion, was wir möchten, dass sie tut, und sobald wir zu einem Ergebnis kommen, geben wir dieses Ergebnis mit dem Schlüsselwort „return“ zurück. Und dann schließen wir die geschweiften Klammern. All diese Schritte waren erforderlich, um eine reine Funktion zu definieren. Jetzt, da wir eine Funktion haben, können wir eine Funktion in anderen Teilen unseres Programms verwenden. Die Verwendung einer Funktion wird allgemein als „Aufrufen einer Funktion“ bezeichnet.
Eine Funktion aufzurufen ist viel einfacher als die Funktion zu deklarieren. Um eine Funktion aufzurufen, können wir ihren Namen verwenden, Klammern öffnen, ihr einige Argumente übergeben und die Klammern schließen. Wenn wir das tun, wird die Funktion uns den Rückgabewert zurückgeben, den wir definiert haben. Je nachdem, was wir mit diesem zurückgegebenen Wert ausführen möchten, können wir ihn einer Variablen oder einer Konstante zuweisen, wir können sogar weitere Berechnungen damit durchführen, wir können ihn an andere Computer senden oder die Ergebnisse direkt anzeigen. Lassen Sie uns einige Beispiele dafür sehen.
// Lassen Sie uns mit einer Funktion beginnen, die zwei Argumente nimmt
// multipliziert sie und gibt das Ergebnis zurück.
// Wir können entweder das Ergebnis direkt zurückgeben,
// oder wir können vorübergehend eine Konstante erstellen
// und diese Konstante ebenfalls zurückgeben.
function multiplyTwoNums(num1, num2) {
const total = num1 * num2;
return total;
}
function multiplyTwoNumsSecondVersion(num1, num2){
return num1 * num2;
// Die beiden oben genannten Funktionen geben uns das genau gleiche Ergebnis
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// Wir können die Gleichheit der Funktionsresultate überprüfen
// mit einer anderen Funktion
function checkEquality(number1, number2){
return number1 === number2;
// Wenn die Ergebnisse beider Funktionen gleich sind,
// gibt die Funktion checkEquality „true“
// als booleschen Datentyp zurück
const isEqual = checkEquality(result1, result2);
// Jetzt können wir diesen booleschen Wert verwenden, um eine Nachricht anzuzeigen
if (isEqual){
alert("Beide geben das gleiche Ergebnis!");
} else {
alert("Sie sind nicht dasselbe!");
}
Das Ausführen des obigen Codes in Chrome Snippets würde uns folgendes Ergebnis geben:
Bis jetzt haben wir mit reinen Funktionen gearbeitet, und das ist normalerweise das, was wir die meiste Zeit anstreben zu programmieren. Aber das bedeutet nicht, dass Sie nur mit reinen Funktionen arbeiten werden. Sobald Sie ein Verständnis für die reinen Funktionen haben, sind unreine Funktionen relativ einfacher. Wenn wir eine Funktion definieren oder deklarieren, müssen wir ihr nach dem Funktionsnamen tatsächlich keine Parameter übergeben. In diesem Fall lassen wir die Klammern leer, wir müssen auch nichts von der Funktion zurückgeben.
Noch mehr, da wir jeden Code innerhalb der geschweiften Klammern einer Funktion schreiben können, können wir mit der Außenwelt interagieren, Daten senden und empfangen, vorhandene Daten ändern, Warnungen anzeigen und so weiter. All dies ist nicht verboten, und das Hinzufügen von console.log-Anweisungen während des Entwicklungsprozesses kann tatsächlich sehr hilfreich sein. Deshalb halten wir uns nicht direkt von unreinen Funktionen fern, aber da sie viele Reibungen und Fehler im Code verursachen können, einschließlich der Erschwerung des Testens Ihres Codes, werden wir versuchen, Aufgaben so weit wie möglich in reinen JavaScript-Funktionen zu trennen. Selbst wenn wir unsere Funktionen unreine machen, indem wir Alert- oder console.log-Anweisungen hinzufügen, möchten wir sie normalerweise entweder durch Löschen oder Kommentieren aus unserem Code entfernen.
Lassen Sie uns einige Beispiele dafür sehen.
// Begrüße den Benutzer mit einer unreinen Funktion
// sie nimmt keine Argumente und gibt nichts zurück
// sie interagiert auch mit der Außenwelt, indem sie
// eine Warnung anzeigt
function greet(){
alert("Hallo Benutzer!");
}
// Beachten Sie, dass die Ergebnisse nicht angezeigt werden
// es sei denn, wir rufen die Funktion auf
greet();
// mache einige Berechnungen und protokolliere sie in der Konsole
function squareNum(num1){
const result = num1 * num1;
console.log(result);
}
// Dies wird das Ergebnis in der JavaScript-Konsole anzeigen, die wir unten haben
// Die Konsole, die wir gerade verwendet haben, wird in der Programmierung häufig verwendet
// einschließlich in JavaScript.
// console.log-Anweisungen können sehr hilfreich sein
// um Ihnen zu sagen, was in Ihrem Programm passiert
// auf diese Weise, wenn etwas Unerwartetes passiert
// können Sie genau sehen, wo und wann es passiert
squareNum(7);
function multiplyTwoNums(num1, num2){
console.log("Die erste Zahl ist " + num1);
console.log("Die zweite Zahl ist " + num2);
const result = num1 * num2;
console.log("Die resultierende Multiplikation ist " + result);
}
// Lassen Sie uns die obige Funktion mit zwei Zahlen aufrufen, die wir wählen // und überprüfen Sie unsere JavaScript-Konsole auf console-Logs multiplyTwoNums(5, 7);
Das Ausführen des obigen Codes würde folgendes Ergebnis liefern:
Wie Sie aus der Ausgabe sehen können, haben wir die Warnmeldung, die aus der ersten Funktion angezeigt wird, die wir ausführen. Wir haben die resultierende Zahl von 49 in der JavaScript-Konsole protokolliert. Direkt danach haben wir detailliertere Ausgaben in der Konsole über die dritte Funktion. Das Erstellen von console.log-Anweisungen ist in der Programmierung ziemlich üblich, je nach Programmiersprache, die Sie verwenden, kann der genaue Name variieren, aber die Idee bleibt die gleiche. Mit console.log-Anweisungen können wir einen Einblick in unser Programm gewinnen und unseren Code besser verstehen. Dies ist besonders ein nützliches Werkzeug, wenn in Ihrem Programm etwas schiefgeht und Sie versuchen herauszufinden, wo genau Sie einen Fehler gemacht haben.
Im nächsten Tutorial werden wir ein weiteres wichtiges Thema in JavaScript namens Objekte sehen. Bevor wir zum nächsten Tutorial übergehen, ist es eine gute Idee, diesen Teil noch einmal zu überprüfen, damit die Konzepte besser verankert werden. Ich empfehle auch dringend, die Beispiele, an denen wir gearbeitet haben, selbst zu tippen und sie aus erster Hand zu erleben. Wenn Sie bereit sind, werden wir im nächsten Tutorial mit den Objekten in JavaScript fortfahren.
Robert Whitney
JavaScript-Experte und Dozent, der IT-Abteilungen schult. Sein Hauptziel ist es, die Produktivität des Teams zu steigern, indem er anderen beibringt, wie man effektiv beim Programmieren zusammenarbeitet.
