Funktionen

3.1 Funktionen deklarieren

Funktionen sind eine der Grundbausteine in JavaScript. Sie erlauben es dir, den Code zu organisieren, Logik wiederzuverwenden und komplexere Strukturen zu erschaffen. Lasst uns drei Hauptmethoden untersuchen, um Funktionen zu deklarieren und zu verwenden: Funktionsdeklaration, Funktionsausdrücke und Pfeilfunktionen.

Funktionsdeklaration – das ist eine Möglichkeit, eine benannte Funktion zu erstellen, die später aufgerufen werden kann. Solche Funktionen werden an die Spitze ihres Geltungsbereichs „gehoben“ (hoisted), was ermöglicht, sie vor der Deklaration im Code aufzurufen.

Syntax:

    
      function name (arguments) {
        // Funktionskörper
      }
    
  

Anwendungsbeispiel:

    
      // Funktionsdeklaration
      function greet(name) {
        return `Hello, ${name}!`;
      }

      // Funktionsaufruf
      console.log(greet('Alice')); // Gibt aus: Hello, Alice!
    
  

3.2 Funktionsausdrücke

Funktionsausdrücke erstellen anonyme Funktionen (Funktionen ohne Namen) und können einer Variablen zugewiesen werden. Solche Funktionen werden nicht „gehoben“, deshalb kann man sie erst nach der Deklaration aufrufen.

Syntax:

    
      const name = function (arguments) {
        // Funktionskörper
      }
    
  

Anwendungsbeispiel:

    
      // Funktionsausdruck

      const greet = function(name) {
        return `Hello, ${name}!`;
      };

      // Funktionsaufruf
      console.log(greet('Bob')); // Gibt aus: Hello, Bob!
    
  

3.3 Pfeilfunktionen

Pfeilfunktionen (arrow functions) — das ist ein kurzer Weg, um Funktionen zu deklarieren, der auch den Kontext this aus dem übergeordneten Geltungsbereich beibehält. Pfeilfunktionen haben kein eigenes this, deshalb sind sie besonders nützlich in Event-Handlern und Array-Methoden.

Syntax:

    
      const name = (arguments) => {
        // Funktionskörper
      }
    
  

Wenn die Funktion einen Parameter annimmt, können die runden Klammern weggelassen werden. Wenn die Funktion einen einzelnen Ausdruck zurückgibt, können die geschweiften Klammern und das Schlüsselwort return weggelassen werden.

Beispiel 1: Vollständige Schreibweise

    
      // Pfeilfunktion

      const greet = (name) => {
        return `Hello, ${name}!`;
      };

      // Funktionsaufruf
      console.log(greet('Charlie')); // Gibt aus: Hello, Charlie!
    
  

Beispiel 2: Kurzform

    
      // Pfeilfunktion mit einem Parameter und einem Ausdruck
      const greet = name => `Hello, ${name}!`;

      // Funktionsaufruf
      console.log(greet('Dana')); // Gibt aus: Hello, Dana!
    
  

3.4 Vergleich der Methoden zur Funktionsdeklaration

Hoisting:

• Funktionsdeklaration: Funktionen werden gehoben, was es ermöglicht, sie vor der Deklaration aufzurufen
• Funktionsausdrücke und Pfeilfunktionen: werden nicht gehoben, sie können nur nach der Deklaration aufgerufen werden

Kontext this:

• Funktionsdeklaration und Funktionsausdrücke: haben einen eigenen this-Kontext
• Pfeilfunktionen: haben keinen eigenen this-Kontext, der Kontext wird vom übergeordneten Geltungsbereich geerbt

Schreibkomfort:

• Pfeilfunktionen: sind kürzer und werden oft für kurze Funktionen und Callbacks verwendet