So definieren Sie Funktionen in JavaScript

Einführung

Eine Funktion ist ein Codeblock, der eine Aktion ausführt oder einen Wert zurückgibt. Funktionen sind benutzerdefinierter Code, der von Programmierern definiert wird und wiederverwendbar ist und daher Ihre Programme modularer und effizienter machen kann.

In diesem Tutorial lernen wir verschiedene Möglichkeiten kennen, eine Funktion zu definieren, eine Funktion aufzurufen und Funktionsparameter in JavaScript zu verwenden.

Definieren einer Funktion

Funktionen werden mit dem Schlüsselwort function definiert oder deklariert. Unten ist die syntax für eine Funktion in JavaScript.,

function nameOfFunction() { // Code to be executed}

Die Deklaration beginnt mit dem Schlüsselwort function, gefolgt vom Namen der Funktion. Funktionsnamen folgen den gleichen Regeln wie Variablen — sie können Buchstaben, Zahlen, Unterstriche und Dollarzeichen enthalten und werden häufig in diesem Fall geschrieben. Dem Namen folgt eine Reihe von Klammern, die für optionale Parameter verwendet werden können. Der Code der Funktion ist in geschweiften Klammern enthalten, genau wie eine for-Anweisung oder eine if-Anweisung.,

In unserem ersten Beispiel erstellen wir eine Funktionsdeklaration, um eine Begrüßungsanweisung an die Konsole zu drucken.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}

Hier haben wir den Code zum Drucken Hello, World! auf die Konsole in der greet() – Funktion. Es wird jedoch nichts passieren und kein Code wird ausgeführt, bis wir die Funktion aufrufen oder aufrufen. Sie können eine Funktion aufrufen, indem Sie den Namen der Funktion gefolgt von den Klammern schreiben.

// Invoke the functiongreet();

Jetzt werden wir diese zusammenstellen, unsere Funktion definieren und aufrufen.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}// Invoke the functiongreet();

Mit dem Aufruf von greet(); wird die Funktion ausgeführt und wir erhalten die Hello, World! als Ausgabe des Programms.

Output
Hello, World!

Jetzt haben wir unseren greet() – Code in einer Funktion enthalten und können ihn beliebig oft wiederverwenden.

Mit Parametern können wir den Code dynamischer machen.

Funktionsparameter

In unserer greet.js – Datei haben wir eine Basisfunktion erstellt, die Hello, World auf die Konsole druckt., Mithilfe von Parametern können wir zusätzliche Funktionen hinzufügen, die den Code flexibler machen. Parameter sind Eingaben, die als Namen an Funktionen übergeben werden und sich als lokale Variablen verhalten.

Wenn sich ein Benutzer bei einer Anwendung anmeldet, möchte das Programm sie möglicherweise mit Namen begrüßen, anstatt nur zu sagen: „Hallo, Welt!”.

Wir fügen unserer Funktion einen Parameter namens name hinzu, um den Namen der begrüßten Person darzustellen.,

// Initialize custom greeting functionfunction greet(name) { console.log(`Hello, ${name}!`);}

Der Name der Funktion ist greet, und jetzt haben wir einen einzelnen Parameter in den Klammern. Der Name des Parameters folgt den gleichen Regeln wie die Benennung einer Variablen. Innerhalb der Funktion haben wir anstelle einer statischen Zeichenfolge, die aus Hello, World, eine Vorlagenliteralzeichenfolge, die unseren Parameter enthält, der sich jetzt als lokale Variable verhält.

Sie werden feststellen, dass wir unseren Parameter name nirgendwo definiert haben. Wir weisen ihm einen Wert zu, wenn wir unsere Funktion aufrufen., Angenommen, unser Benutzer heißt Sammy, rufen wir die Funktion auf und platzieren den Benutzernamen als Argument. Das Argument ist der tatsächliche Wert, der an die Funktion übergeben wird, in diesem Fall ist es die Zeichenfolge "Sammy".

// Invoke greet function with "Sammy" as the argumentgreet("Sammy");

Der Wert von "Sammy" wird über den Parameter name an die Funktion übergeben. Jedes Mal, wenn name in der gesamten Funktion verwendet wird, wird der Wert "Sammy". Hier ist der ganze Code.

Wenn wir das obige Programm ausführen, erhalten wir die folgende Ausgabe.

Output
Hello, Sammy!

Jetzt haben wir ein Beispiel, wie eine Funktion wiederverwendet werden kann. In einem realen Beispiel würde die Funktion den Benutzernamen aus einer Datenbank ziehen, anstatt den Namen direkt als Argumentwert anzugeben.

Zusätzlich zu den Parametern können Variablen innerhalb von Funktionen deklariert werden. Diese Variablen werden als lokale Variablen bezeichnet und sind nur innerhalb des Bereichs ihres eigenen Funktionsblocks vorhanden., Der Variablenbereich bestimmt die Zugänglichkeit von Variablen; Variablen, die innerhalb einer Funktion definiert sind, sind von außerhalb der Funktion nicht zugänglich, können jedoch so oft verwendet werden, wie ihre Funktion in einem Programm verwendet wird.

Rückgabewerte

In einer Funktion können mehr als ein Parameter verwendet werden. Wir können mehrere Werte an eine Funktion übergeben und einen Wert zurückgeben. Wir werden eine Funktion erstellen, um die Summe von zwei Werten zu finden, dargestellt durch x und y.

// Initialize add functionfunction add(x, y) { return x + y;}// Invoke function to find the sumadd(9, 7);

Im obigen Programm haben wir eine Funktion mit den Parametern x und definiert und dann die Werte von 9 und 7 an die Funktion übergeben. Wenn wir das Programm ausführen, erhalten wir die Summe dieser Zahlen als Ausgabe.

Output
16

In diesem fall, mit 9 und 7 übergeben an die sum() funktion, das programm zurück 16.,

Wenn das Schlüsselwort return verwendet wird, wird die Funktion nicht mehr ausgeführt und der Wert des Ausdrucks wird zurückgegeben. Obwohl in diesem Fall der Browser den Wert in der Konsole anzeigt, entspricht er nicht der Verwendung von console.log() zum Drucken auf der Konsole. Durch Aufrufen der Funktion wird der Wert genau dort ausgegeben, wo die Funktion aufgerufen wurde. Dieser Wert kann sofort verwendet oder in eine Variable eingefügt werden.

Funktionsausdrücke

Im letzten Abschnitt haben wir eine Funktionsdeklaration verwendet, um die Summe zweier Zahlen abzurufen und diesen Wert zurückzugeben., Wir können auch einen Funktionsausdruck erstellen, indem wir einer Variablen eine Funktion zuweisen.

Mit unserem gleichenadd Funktionsbeispiel können wir den zurückgegebenen Wert direkt auf eine Variable anwenden, in diesem Fallsum.

// Assign add function to sum constantconst sum = function add(x, y) { return x + y;}// Invoke function to find the sumsum(20, 5);

Output
25

Nun ist die sum Konstante eine Funktion. Wir können diesen Ausdruck prägnanter machen, indem wir ihn in eine anonyme Funktion verwandeln, die eine unbenannte Funktion ist., Derzeit hat unsere Funktion den Namen add, aber mit Funktionsausdrücken ist es nicht notwendig, die Funktion zu benennen, und der Name wird normalerweise weggelassen.

// Assign function to sum constantconst sum = function(x, y) { return x + y;}// Invoke function to find the sumsum(100, 3);

Output
103

In diesem Beispiel haben wir den Namen der Funktion entfernt, die add war, und verwandelte sie in eine anonyme Funktion. Ein benannter Funktionsausdruck könnte verwendet werden, um das Debuggen zu unterstützen, wird jedoch normalerweise weggelassen.,

Pfeilfunktionen

Bisher haben wir mit dem Schlüsselwort function Funktionen definiert. Es gibt jedoch eine neuere, prägnantere Methode zum Definieren einer Funktion, die ab ECMAScript 6 als Pfeilfunktionsausdrücke bezeichnet wird. Pfeilfunktionen, wie sie allgemein bekannt sind, werden durch ein Gleichheitszeichen gefolgt von einem größer als Zeichen dargestellt: =>.

Pfeilfunktionen sind immer anonyme Funktionen und eine Art Funktionsausdruck. Wir können ein einfaches Beispiel erstellen, um das Produkt aus zwei Zahlen zu finden.

// Define multiply functionconst multiply = (x, y) => { return x * y;}// Invoke function to find productmultiply(30, 4);

Output
120

Anstatt das Schlüsselwort function auszuschreiben, verwenden wir den Pfeil =>, um eine Funktion anzuzeigen. Andernfalls funktioniert es ähnlich wie ein regulärer Funktionsausdruck mit einigen erweiterten Unterschieden, über die Sie unter Pfeilfunktionen im Mozilla Developer Network lesen können.

Bei nur einem Parameter können die Klammern ausgeschlossen werden. In diesem Beispiel quadrieren wir x, für das nur eine Zahl als Argument übergeben werden muss., Die Klammern wurden weggelassen.

// Define square functionconst square = x => { return x * x;}// Invoke function to find productsquare(8);

Output
64

Hinweis: Bei keinen Parametern ist in den Pfeilfunktionen ein leerer Satz Klammern () erforderlich.

Mit diesen speziellen Beispielen, die nur aus einer return – Anweisung bestehen, können Pfeilfunktionen die Syntax noch weiter reduzieren. Wenn die Funktion nur eine einzelne Zeile return, können sowohl die geschweiften Klammern als auch diereturn Anweisung weggelassen werden, wie im folgenden Beispiel gezeigt.,

// Define square functionconst square = x => x * x;// Invoke function to find productsquare(10);

Output
100

Alle drei Syntaxtypen führen zur gleichen Ausgabe. Es ist in der Regel eine Frage der Präferenz oder Firmencodierungsstandards zu entscheiden, wie Sie Ihre eigenen Funktionen strukturieren.

Schlussfolgerung

In diesem Tutorial haben wir Funktionsdeklarationen und Funktionsausdrücke behandelt, Werte von Funktionen zurückgegeben, Variablen Funktionswerte zugewiesen und ES6-Pfeilfunktionen.

Funktionen sind Codeblöcke, die einen Wert zurückgeben oder eine Aktion ausführen, wodurch Programme skalierbar und modular sind.