Funktionen in JavaScript

Dieser Artikel erklärt Funktionen in JavaScript.

YouTube Video

Funktionen in JavaScript

Funktionen in JavaScript sind Blöcke von wiederverwendbarem Code, die verwendet werden, um bestimmte Aufgaben auszuführen. Die Verwendung von Funktionen verbessert die Lesbarkeit des Codes und erleichtert die Wartung. Funktionen können auf verschiedene Weise definiert und flexibel mit Argumenten und Rückgabewerten manipuliert werden.

Möglichkeiten, Funktionen zu definieren

Funktionsdeklaration

Funktionen können mit dem Schlüsselwort function definiert werden. Funktionsdeklarationen werden gehoisted, bevor der Code ausgeführt wird, sodass sie aufgerufen werden können, bevor sie definiert sind.

1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4    return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice

In diesem Beispiel wird, da die greet-Funktion vor ihrer Deklaration aufgerufen wird, Hello, Everyone und Hello, Alice angezeigt.

Funktionsausdruck

Funktionen können auch definiert werden, indem sie einer Variablen zugewiesen werden. In diesem Fall wird die Funktion nicht gehoisted und kann nur aufgerufen werden, nachdem sie definiert wurde.

1const greet = function(name) {
2    return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob

In diesem Beispiel wird Hello, Bob angezeigt.

Pfeilfunktion

Pfeilfunktionen sind eine Möglichkeit, Funktionen mit einer kürzeren Syntax zu definieren. Sie sind besonders nützlich bei der Verwendung von anonymen Funktionen (Funktionen ohne Namen). Pfeilfunktionen haben auch ein anderes Verhalten in Bezug auf das Schlüsselwort this.

 1const greet = (name) => {
 2    return "Hello, " + name;
 3};
 4
 5// When it can be expressed in a single line,
 6// `return` and curly braces can be omitted
 7const greetShort = name => "Hello, " + name;
 8
 9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave

Funktionen können in diesem Beispiel als greet und greetShort deklariert werden. Wenn die Funktion einzeilig ist, können die {} (geschweiften Klammern) wie bei greetShort weggelassen werden.

Elemente einer Funktion

Argumente

Werte, die an eine Funktion übergeben werden, werden Argumente genannt. Durch das Festlegen von Argumenten bei der Definition einer Funktion können Sie Werte beim Aufrufen der Funktion übergeben.

1function add(a, b) {
2    return a + b;
3}
4
5console.log(add(2, 3)); // 5

Standardargumente

Sie können einen Standardwert angeben, wenn kein Wert an die Argumente übergeben wird.

1function greet(name = "Guest") {
2    return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice

In diesem Beispiel wird der Standardwert Guest verwendet, wenn greet() aufgerufen wird.

Rückgabewert

Sie können einen Rückgabewert mit der return-Anweisung aus einer Funktion zurückgeben. Wenn es keine return-Anweisung gibt, gibt die Funktion undefined zurück.

1function greet(name) {
2    console.log('Hello, ' + name + '!');
3}
4function square(num) {
5    return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined

In diesem Beispiel gibt greet, da es keinen Wert zurückgibt, undefined als Rückgabewert zurück.

Anonyme Funktion

Eine Funktion ohne Namen wird als anonyme Funktion bezeichnet. Sie werden häufig als Funktionsausdrücke oder Pfeilfunktionen verwendet.

1const double = function(num) {
2    return num * 2;
3};
4
5console.log(double(5)); // 10

Sofort aufgerufenes Funktionsausdruck (IIFE)

Ein Sofort aufgerufenes Funktionsausdruck (IIFE) ist eine Funktion, die unmittelbar nach ihrer Definition ausgeführt wird. Es wird normalerweise verwendet, um den Geltungsbereich zu steuern.

1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3    console.log("This is an IIFE");
4})(); // This is an IIFE

Es wird sofort nach der Deklaration ausgeführt.

Callback-Funktion

Das Übergeben einer Funktion als Argument an eine andere Funktion zur späteren Ausführung wird als Callback-Funktion bezeichnet. Es wird häufig in der asynchronen Verarbeitung und bei der Ereignisbehandlung verwendet.

1function processData(callback) {
2    let data = "Processed Data";
3    callback(data);
4}
5
6processData(function(result) {
7    console.log(result); // Processed Data
8});

In diesem Beispiel wird eine Funktion, die einen Wert in die Konsole ausgibt, als Callback-Funktion übergeben.

Rekursive Funktion

Das Aufrufen einer Funktion durch sie selbst wird als Rekursion bezeichnet, und eine Funktion, die wiederholende Verarbeitungen damit durchführt, wird als rekursive Funktion bezeichnet. Zum Beispiel kann eine Funktion zur Berechnung einer Fakultät mithilfe von Rekursion wie folgt implementiert werden.

 1function factorial(n) {
 2    if (n === 0) {
 3        return 1;
 4    } else {
 5        return n * factorial(n - 1);
 6    }
 7}
 8
 9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)

In diesem Beispiel wird die Fakultät von 5, also 120, angezeigt.

this-Schlüsselwort

Das in einer Funktion verwendete this gibt an, auf welches Objekt die Funktion verweist. In einer regulären Funktion verweist es auf das aufrufende Objekt, während es in Pfeilfunktionen das this des Bereichs, in dem es definiert wurde, beibehält.

 1const obj = {
 2    name: "Alice",
 3    greet: function() {
 4        console.log(this.name); // Refers to "Alice"
 5    }
 6};
 7
 8obj.greet(); // Alice
 9
10const obj2 = {
11    name: "Bob",
12    greet: () => {
13        // Arrow function refers to the outer scope (undefined here)
14        console.log(this.name);
15    }
16};
17
18obj2.greet(); // undefined

Das greet der Variable obj wird mit dem Schlüsselwort function deklariert. Daher bezieht sich das Schlüsselwort this auf das Objekt der Variable obj. Andererseits wird das greet der Variablen obj2 unter Verwendung einer Pfeilfunktion deklariert. Daher bezieht sich das Schlüsselwort this auf das Objekt im äußeren Gültigkeitsbereich und ist in diesem Beispiel undefined.

Funktionsbereich und Closures

Variablen, die innerhalb einer Funktion definiert sind, können von außerhalb der Funktion nicht zugegriffen werden. Dies wird als Funktionsbereich bezeichnet. Es gibt auch ein Merkmal namens Closure, das den Gültigkeitsbereich zu dem Zeitpunkt beibehält, an dem die Funktion definiert wird.

 1function outer() {
 2    let outerVar = "I am outer!";
 3
 4    function inner() {
 5        console.log(outerVar); // Can access outerVar
 6    }
 7
 8    return inner;
 9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!

In diesem Beispiel kann die Funktion inner auf die Variable outerVar zugreifen, da sie den Gültigkeitsbereich beibehält, in dem sie definiert wurde.

Zusammenfassung

• Es gibt verschiedene Möglichkeiten, Funktionen zu definieren, darunter Funktionsdeklarationen, Funktionsausdrücke und Pfeilfunktionen.
• Funktionen können Argumente entgegennehmen und Werte zurückgeben.
• Es gibt spezielle Verwendungszwecke wie Callback-Funktionen und rekursive Funktionen.
• Bei der Handhabung von this ist Vorsicht geboten, da sich Pfeilfunktionen und reguläre Funktionen unterschiedlich verhalten.
• Closures können verwendet werden, um auf interne Variablen von außerhalb des Gültigkeitsbereichs zuzugreifen.

Funktionen sind eines der wichtigen Konzepte in JavaScript und nutzen seine flexible Struktur.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video