7.3.7 Funktionen

Funktionen sind Programmblöcke, die zwar vorhanden sind, jedoch nicht sofort ausgeführt werden. Einmal deklariert, sind sie immer wieder innerhalb des Sourcecodes verwendbar. Funktionen geben entweder einen Wert zurück oder führen Befehle aus.

Syntax von Funktionen

Eine Funktion hat die folgende Syntax:

1
2
3
4
function funktionsName(parameter1, parameter2) {
  // Anweisungen
  return variable;
}

Die Anzahl der Parameter ist beliebig. Es kann auch kein Parameter verwendet werden; in diesem Fall bleiben die Klammern leer. Innerhalb der Funktion werden die übergebenen Werte über den Parameternamen angesprochen.

Beispiel: Analyse von Textstellen

Hier ein Beispiel für eine Funktion, die eine Textstelle basierend auf ihrer Länge analysiert.

1
2
3
4
5
6
7
8
9
function analyse(textstelle) {
  if (textstelle.length > 20) {
    return "Langer Text";
  } else if (textstelle.length > 0) {
    return "Kurzer Text";
  } else {
    return "Leerer Text";
  }
}

Hier der komplette HTML-Sourcecode zum Testen der Funktion.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Funktionen</title>
</head>
<body>
  <h1>Textlänge ermitteln</h1>

  <!-- Hier beginnt JavaScript -->
  <script>
    "use strict";
    function analyse(textstelle) {
      if (textstelle.length > 20) {
        return "Langer Text";
      } else if (textstelle.length > 0) {
        return "Kurzer Text";
      } else {
        return "Leerer Text";
      }
    }

    const text1 = "Kurzer Text.";
    const text2 = "Dieser Text hat mehr als zwanzig Zeichen.";

    document.write("1. Analyse: " + analyse(text1) + "<br>");
    document.write("2. Analyse: " + analyse(text2) + "<br>");
  </script>
</body>
</html>

So sieht es im Browser aus

Lokale Variablen in Funktionen

Die Variablen innerhalb einer Funktion sind lokal gültig. Sie existieren nicht außerhalb der Funktion, was die Sicherheit und Modularität verbessert.

Beispiel: 

1
2
3
4
5
6
7
8
function berechneAlter(geburtsjahr) {
  const aktuellesJahr = new Date().getFullYear();
  const alter = aktuellesJahr - geburtsjahr;
  return alter;
}

console.log(berechneAlter(2002)); 
// Ausgabe: 22 (wenn aktuelles Jahr 2024 ist)

Nerd-Wissen: Funktionen mit alternativen Schreibweisen

JavaScript bietet neben der klassischen Funktionsdeklaration auch anonyme Funktionen und Arrow Functions (Pfeilfunktionen) als Alternativen. Diese Schreibweisen haben jeweils Vor- und Nachteile und können je nach Anwendungsfall sinnvoll sein.

Nerd-Wissen: Anonyme Funktionen

Anonyme Funktionen sind Funktionen ohne Namen, die häufig als Callback-Funktionen verwendet werden. Sie können einer Variablen zugewiesen oder direkt als Argument an andere Funktionen übergeben werden.

Beispiel: Anonyme Funktion

1
2
3
4
5
6
7
8
9
const analyse = function(textstelle) {
  if (textstelle.length > 20) {
    return "Langer Text";
  } else if (textstelle.length > 0) {
    return "Kurzer Text";
  } else {
    return "Leerer Text";
  }
};

Wann sollte man Anonyme Funktionen verwenden?

  • Ideal, wenn eine Funktion nur in einem lokalen Kontext benötigt wird, etwa als Argument für andere Funktionen.
  • Sie sind flexibel und unterstützen alle Funktionen herkömmlicher Funktionsausdrücke.

Nerd-Wissen: Arrow Functions

Arrow Functions wurden mit ES6 (auch bekannt als ECMAScript 2015) eingeführt und bieten eine kürzere Syntax. Sie übernehmen den this-Wert aus dem umgebenden Kontext (lexikalisches this).

Beispiele für Arrow Funktionen

Benannte Arrow Funktion 

1
2
3
4
const addiere = (a, b) => {
  const result = a + b;
  return result;
}; // anonym, weil der Name nur in der Zuweisung existiert

Anonyme Arrow Funktion 

1
const addiere = (a, b) => a + b; // anonyme Arrow-Funktion, da sie keinen Namen hat

Benannte Arrow Function 

1
2
3
4
5
6
7
const FunktionenSammlung = {
  berechneSumme: (a, b) => a + b,
  verdopple: (x) => x * 2,
};

// Hier sind die Arrow Functions Teil eines Objekts und durch ihre Eigenschaftsnamen benannt.
console.log(FunktionenSammlung.berechneSumme(2, 3)); // 5

Wann sollte man Arrow Funktionen verwenden?

  • Ideal, wenn eine kurze und prägnante Syntax benötigt wird.
  • Besonders nützlich für Funktionen, bei denen kein eigenes this erforderlich ist.

Vorteile und Einschränkungen

Schreibweise Vorteile Einschränkungen
Klassische Funktion Klarer und leicht verständlich Etwas längere Syntax
Anonyme Funktion Lokal definierbar, flexibel Besitzt eigenes this, daher nicht für alle Kontexte geeignet
Arrow Function Kürzere Syntax, lexikalisches this Kein eigenes this, nicht als Konstruktor nutzbar

Fazit

  • Verwenden Sie die klassische Funktionsdeklaration für komplexe oder globale Funktionen.
  • Setzen Sie anonyme Funktionen ein, wenn sie lokal bleiben sollen, z. B. als Callback.
  • Nutzen Sie Arrow Functions für kurze, prägnante Funktionen, insbesondere wenn kein eigenes this benötigt wird.