Funktionen in JavaScript erstellen

Eine Funktion ist ein wiederverwendbarer Code, der ausgeführt wird, wenn Sie ihn aufrufen. Mit Funktionen können Sie Code wiederverwenden, wodurch er modularer und einfacher zu warten ist.

Es gibt mehrere Möglichkeiten, Funktionen in JavaScript zu erstellen. Hier lernen Sie die verschiedenen Möglichkeiten kennen, Funktionen zu erstellen und zu verwenden.

Funktionsdeklarationen: Der einfache Weg

Eine Möglichkeit, Funktionen in JavaScript zu erstellen, sind Funktionsdeklarationen. Eine Funktionsdeklaration ist eine Funktion in JavaScript, die der folgenden Syntax folgt.

FunktionFunktionsname(Parameter) {
// hier kommt der Code rein...
zurückkehren"Dies ist eine Funktionsdeklaration";
}

Die Komponenten des obigen Codeblocks umfassen:

• Der Funktion Schlüsselwort: Dieses Schlüsselwort deklariert eine Funktion.
• Funktionsname: Dies ist der Name der Funktion. In der Praxis sollte es so anschaulich und aussagekräftig wie möglich sein und angeben, was die Funktion tut.
  instagram viewer
• Parameter: Dies repräsentiert die Funktionsparameter. Parameter sind eine optionale Liste von Variablen, die Sie an eine Funktion übergeben können, wenn Sie sie aufrufen.
• Der Funktionskörper: Dieser enthält den Code, den die Funktion ausführen wird, wenn Sie sie aufrufen. Es ist von geschweiften Klammern umgeben {} und kann jeden gültigen JavaScript-Code enthalten.
• Der zurückkehren Anweisung: Diese Anweisung stoppt die Ausführung einer Funktion und gibt den angegebenen Wert zurück. Im obigen Fall würde der Aufruf der Funktion die Zeichenfolge „Dies ist eine Funktionsdeklaration“ zurückgeben.

Die folgende Funktionsdeklaration nimmt beispielsweise drei Zahlen als Parameter und gibt ihre Summe zurück.

FunktionaddThreeNumbers(a, b, c) {
zurückkehren a+b+c;
}

Um eine Funktionsdeklaration in JavaScript aufzurufen, schreiben Sie den Funktionsnamen gefolgt von einer Reihe von Klammern (). Wenn die Funktion Parameter akzeptiert, übergeben Sie sie als Argumente in Klammern.

Zum Beispiel:

addThreeNumbers(1, 2, 3) // 6

Der obige Codeblock ruft die auf addThreeNumber Funktionen und übergibt 1, 2 und 3 als Argumente an die Funktion. Wenn Sie diesen Code ausführen, wird der Wert 6 zurückgegeben.

JavaScript-Hebezeuge Funktionsdeklarationen, was bedeutet, dass Sie sie aufrufen können, bevor Sie sie definieren.

Zum Beispiel:

isHoisted(); // Funktion wird gehisst
Funktionist hochgezogen() {
Konsole.Protokoll("Funktion wird gehisst");
zurückkehrenWAHR;
}

Wie im obigen Codeblock gezeigt, Aufruf ist hochgezogen vor der Definition würde es keinen Fehler auslösen.

Funktionsausdrücke: Funktionen als Werte

In JavaScript können Sie eine Funktion als Ausdruck definieren. Sie können den Funktionswert dann einer Variablen zuweisen oder als Argument für eine andere Funktion verwenden.

Sie werden auch als anonyme Funktionen bezeichnet, da sie keine Namen haben und Sie sie nur von der Variablen aufrufen können, der Sie sie zugewiesen haben.

Unten ist die Syntax für einen Funktionsausdruck:

konst Funktionsname = Funktion () {
zurückkehren"Funktionsausdruck";
};

Um einen Funktionsausdruck in JavaScript aufzurufen, schreiben Sie den Variablennamen, den Sie der Funktion zugewiesen haben, gefolgt von einer Reihe von Klammern (). Wenn die Funktion Parameter akzeptiert, übergeben Sie sie als Argumente in Klammern.

Zum Beispiel:

Funktionsname(); // Funktionsausdruck

Funktionsausdrücke sind praktisch beim Erstellen von Funktionen, die in anderen Funktionen ausgeführt werden. Typische Beispiele sind Event-Handler und ihre Callbacks.

Zum Beispiel:

button.addEventListener("klicken", Funktion (Fall) {
Konsole.Protokoll("Du hast auf eine Schaltfläche geklickt!");
});

Im obigen Beispiel wurde ein Funktionsausdruck verwendet, der an annimmt Fall Argument als Rückruf an die addEventListener Funktion. Sie müssen die Funktion nicht explizit aufrufen, wenn Sie einen Funktionsausdruck als Callback verwenden. Es wird automatisch von seiner übergeordneten Funktion aufgerufen.

Wenn der Ereignis-Listener im obigen Fall a klicken Ereignis, es ruft die Callback-Funktion auf und übergibt die Fall Objekt als Argument.

Im Gegensatz zu Funktionsdeklarationen werden Funktionsausdrücke nicht hochgezogen, sodass Sie sie nicht aufrufen können, bevor Sie sie definiert haben. Der Versuch, auf einen Funktionsausdruck zuzugreifen, bevor Sie ihn definieren, führt zu a Referenzfehler.

Zum Beispiel:

isHoisted(); // ReferenceError: Zugriff auf 'isHoisted' vor der Initialisierung nicht möglich
konst isHoisted = Funktion () {
Konsole.Protokoll("Funktion wird gehisst");
};

Pfeilfunktionen: Kompakt und begrenzt

ES6 führte eine Abkürzung zum Schreiben anonymer Funktionen in JavaScript ein, die als Pfeilfunktionen bezeichnet wird. Sie haben eine prägnante Syntax, die Ihren Code lesbarer machen kann, insbesondere wenn es um kurze, einzeilige Funktionen geht.

Im Gegensatz zu anderen Methoden zum Erstellen von Funktionen benötigen Pfeilfunktionen nicht die Funktion Stichwort. Ein Pfeilfunktionsausdruck besteht aus drei Teilen:

• Ein Klammerpaar (()) mit den Parametern. Sie können die Klammern weglassen, wenn die Funktion nur einen Parameter hat.
• Ein Pfeil (=>), das aus einem Gleichheitszeichen (=) und ein Größer-als-Zeichen (>).
• Ein Paar geschweifter Klammern, die den Funktionskörper enthalten. Sie können die geschweiften Klammern weglassen, wenn die Funktion aus einem einzigen Ausdruck besteht.

Zum Beispiel:

// Einzelner Parameter, implizite Rückgabe
konst Funktionsname = Parameter =>Konsole.Protokoll("Einzelparameter-Pfeilfunktion")
// Mehrere Parameter, explizite Rückgabe
konst Funktionsname = (parameter_1, parameter_2) => {
zurückkehren"Pfeilfunktion mit mehreren Parametern"
};

Wenn Sie die geschweiften Klammern weglassen, gibt die Pfeilfunktion implizit den einzelnen Ausdruck zurück, sodass das nicht erforderlich ist zurückkehren Stichwort. Wenn Sie andererseits die geschweiften Klammern nicht weglassen, müssen Sie mithilfe von explizit einen Wert zurückgeben zurückkehren Stichwort.

Pfeilfunktionen haben auch eine andere Das Bindung im Vergleich zu regulären Funktionen. In regulären Funktionen ist der Wert von Das hängt davon ab, wie Sie die Funktion aufrufen. In einer Pfeilfunktion Das ist immer an die gebunden Das Wert des umgebenden Bereichs.

Zum Beispiel:

konst foo = {
 Name: "Dave",
 grüßen: Funktion () {
 setTimeout(() => {
Konsole.Protokoll(„Hallo, mein Name ist ${Das.Name}`);
 }, 1000);
 },
};
foo.greet(); // Protokolliert "Hallo, mein Name ist Dave" nach 1 Sekunde

Im obigen Beispiel ist die Pfeilfunktion innerhalb der grüßen Methode hat Zugriff auf dieser Name, obwohl die setTimeout Funktion ruft es auf. Eine normale Funktion hätte ihre Das an das globale Objekt gebunden.

Wie der Name schon sagt, ist eine sofort aufgerufene Funktion (IIFE) eine Funktion, die ausgeführt wird, sobald sie definiert ist.

Hier ist die Struktur eines IIFE:

(Funktion () {
// Code hier
})();
(() => {
// Code hier
})();
(Funktion (Param_1, Param_2) {
Konsole.log (Param_1 * Param_2);
})(2, 3);

Ein IIFE besteht aus einem Funktionsausdruck, der in Klammern eingeschlossen ist. Folgen Sie ihm mit einem Paar Klammern außerhalb des Gehäuses, um die Funktion aufzurufen.

Sie können IIFEs verwenden, um Bereiche zu erstellen, Implementierungsdetails auszublenden und Daten zwischen mehreren Skripts freizugeben. Sie dienten einst als Modulsystem in JavaScript.

Erstellen einer Funktion auf viele verschiedene Arten

Es ist entscheidend zu verstehen, wie Funktionen in JavaScript erstellt werden. Dies gilt für eine einfache Funktion, die eine einfache Berechnung ausführt, oder eine anspruchsvolle Funktion, die mit anderen Teilen Ihres Codes interagiert.

Sie können die oben beschriebenen Techniken verwenden, um Funktionen in JavaScript zu erstellen und Ihren Code zu strukturieren und zu organisieren. Wählen Sie den Ansatz, der Ihren Anforderungen am besten entspricht, da jeder verschiedene Vorteile und Anwendungen bietet.