WebP 1 – Funktionen

Zusammenfassung

Funktionen sind Teilprogramme — benannte Code-Blöcke, die von beliebig vielen Stellen im Programm aufgerufen werden können. Sie folgen zwei Leitprinzipien: "Don't repeat yourself!" (keinen Code duplizieren) und "Divide et Impera!" (Teile und herrsche — komplexe Probleme in kleinere Teile aufteilen). In TypeScript gibt es zwei Schreibweisen für Funktionen: die klassische function-Schreibweise und die moderne Arrow-Function-Schreibweise (=>). Letztere wird besonders häufig für Eventhandler verwendet.

Schlüsselbegriffe

Funktion

Ein benannter, wiederverwendbarer Code-Block. Eine Funktion kann Parameter entgegennehmen, eine Aufgabe ausführen und einen Wert zurückgeben. Wird mit function name(...) { ... } oder als Arrow Function definiert.

Parameter

Eingabewerte einer Funktion. Sie stehen in den runden Klammern der Funktionsdefinition und verhalten sich wie lokale Variablen innerhalb der Funktion.

Rückgabewert

Der Wert, den eine Funktion mit return an die aufrufende Stelle zurückgibt. Der Typ des Rückgabewertes wird nach den Parametern mit einem Doppelpunkt angegeben.

void

Der Rückgabetyp von Funktionen, die keinen Wert zurückgeben. Eine void-Funktion gibt Dinge auf dem Bildschirm aus, speichert Daten oder verändert den DOM — aber gibt nichts zurück.

Arrow Function

Eine kürzere Schreibweise für Funktionen mit dem dicken Pfeil =>. Arrow Functions sind anonym (kein Name) und werden häufig als Callback-Funktionen in Eventhandlern eingesetzt.

Callback-Funktion

Eine Funktion, die als Parameter an eine andere Funktion übergeben wird. Beispiel: der zweite Parameter von addEventListener ist eine Callback-Funktion, die aufgerufen wird, wenn das Event eintritt.

Rekursion

Eine Funktion, die sich selbst aufruft. Geeignet für Probleme, die sich natürlich in ähnliche Teilprobleme zerlegen lassen (z. B. Fakultät). Benötigt immer einen Basisfall, der die Rekursion beendet.

Lokale Variable

Eine Variable, die innerhalb einer Funktion deklariert wird. Sie ist nur innerhalb dieser Funktion sichtbar und verliert ihre Gültigkeit, sobald die Funktion beendet wird.

Anonyme Funktion

Eine Funktion ohne Namen. Sie wird häufig direkt an Stellen deklariert, an denen sie als Callback übergeben wird (z. B. als Arrow Function).

Kernkonzepte

Warum Funktionen?

Prinzip 1: Don't repeat yourself!

Wenn dieselbe Logik an fünf verschiedenen Stellen im Code steht und sich etwas ändert, muss man alle fünf Stellen anpassen. Vergisst man eine, entstehen schwer auffindbare Fehler. Funktionen lösen das: Der Code steht nur einmal, wird aber von beliebig vielen Stellen aufgerufen.

Prinzip 2: Divide et Impera! (Teile und herrsche)

"Divide et Impera" war eine Strategie im Römischen Reich zur Verwaltung riesiger Gebiete — und funktioniert in der Programmierung genauso. Langer Code ohne Struktur ist schwer zu verstehen. Funktionen teilen das Programm in semantisch abgeschlossene Einheiten auf.

function-Schreibweise

// Syntax: function Name(Parameter: Typ): Rückgabetyp { ... }
 
function max(a: number, b: number): number {
  if (a > b) {
    return a;
  } else {
    return b;
  }
}
 
// Aufruf:
const x: number = 3;
const y: number = 5;
const m: number = max(x, y);
console.log(`Der größere Wert von ${x} und ${y} ist ${m}`);
// Ausgabe: "Der größere Wert von 3 und 5 ist 5"

Teil	Bedeutung
`function`	Schlüsselwort
`max`	Name der Funktion
`(a: number, b: number)`	Parameter mit Typen
`: number`	Typ des Rückgabewerts
`return a;`	Gibt Wert zurück und beendet die Funktion

Funktionen ohne Rückgabewert: void

Einige Funktionen geben nichts zurück — sie geben Dinge aus, verändern den DOM oder speichern Daten.

function begruessung(name: string): void {
  console.log(`Hallo, ${name}!`);
  // kein return nötig
}
 
begruessung("Anna");  // Ausgabe: "Hallo, Anna!"

Info

return beendet die Funktion sofort. Alles danach wird nicht ausgeführt. Das nutzt man auch zur Fehlerprüfung: Stimmt die Eingabe nicht, verlässt man die Funktion früh mit return.

Arrow Functions (Fat Arrow)

Arrow Functions sind eine kürzere Schreibweise. Statt function steht der Pfeil => zwischen Parameterliste und Funktionskörper. Sie sind anonym — tragen keinen eigenen Namen.

// Klassische Funktion:
function verdoppeln(x: number): number {
  return x * 2;
}
 
// Äquivalente Arrow Function:
const verdoppeln = (x: number): number => {
  return x * 2;
};
 
// Kurze Form (ein Ausdruck → kein return, keine geschweifte Klammer nötig):
const verdoppeln = (x: number): number => x * 2;

Arrow Functions werden vor allem als Callback-Funktionen eingesetzt — also als Funktion, die einer anderen Funktion übergeben wird:

// addEventListener erwartet als zweiten Parameter eine Funktion
button.addEventListener("click", (event) => {
  console.log("Button wurde geklickt!");
});

Hier ist (event) => { ... } eine anonyme Arrow Function, die aufgerufen wird, sobald das click-Event eintritt.

Rekursion

Eine Funktion kann sich selbst aufrufen — das nennt man Rekursion.

Klassisches Beispiel: Die mathematische Fakultät

1! = 1
n! = n × (n−1)!

function fac(n: number): number {
  if (n === 1) {
    return 1;        // Basisfall: Rekursion beendet sich hier
  } else {
    return n * fac(n - 1);   // Rekursionsschritt
  }
}
 
console.log(fac(5));  // 5 * 4 * 3 * 2 * 1 = 120

Achtung

Jede rekursive Funktion braucht einen Basisfall — eine Bedingung, bei der sie sich nicht mehr selbst aufruft. Fehlt der Basisfall, entsteht eine Endlosrekursion, die das Programm zum Absturz bringt.

Beispiel: Funktionen in der Praxis

// Prüft ob eine E-Mail-Adresse gültig ist
function isValidEmail(email: string): boolean {
  return email.includes("@") && email.includes(".");
}
 
// Formatiert einen vollen Namen
function formatName(firstname: string, lastname: string): string {
  return `${firstname} ${lastname}`;
}
 
// Gibt die Summe aller Array-Elemente zurück
function summe(zahlen: number[]): number {
  let total: number = 0;
  for (let i = 0; i < zahlen.length; i++) {
    total += zahlen[i];
  }
  return total;
}
 
// Verwendung:
console.log(isValidEmail("test@thm.de"));  // true
console.log(formatName("Max", "Muster"));  // "Max Muster"
console.log(summe([1, 2, 3, 4, 5]));       // 15

Lernkarten

Frage

Was bedeutet 'Don't repeat yourself' in der Programmierung?

Antwort

Code soll nicht an mehreren Stellen kopiert werden. Stattdessen wird der Code in einer Funktion zusammengefasst, die von allen Stellen aufgerufen wird. So muss man bei Änderungen nur eine Stelle anpassen.

Frage

Was ist eine Arrow Function und wann wird sie verwendet?

Antwort

Eine kürzere Schreibweise für Funktionen mit dem Pfeil =>. Arrow Functions sind anonym (kein Name). Sie werden häufig als Callback-Funktionen eingesetzt, z. B. als zweiter Parameter von addEventListener.

Frage

Was passiert, wenn eine Funktion return ausführt?

Antwort

Die Funktion wird sofort beendet und der angegebene Wert wird an die aufrufende Stelle zurückgegeben. Code, der nach return steht, wird nicht ausgeführt.

Frage

Was ist der Unterschied zwischen einer Funktion mit void-Rückgabetyp und einer mit number?

Antwort

void bedeutet: die Funktion gibt nichts zurück (gibt z. B. nur etwas aus oder verändert den DOM). number bedeutet: die Funktion berechnet etwas und gibt das Ergebnis zurück — es kann in einer Variable gespeichert werden.

Frage

Was ist ein Basisfall in einer rekursiven Funktion?

Antwort

Eine Bedingung, bei der die Funktion sich nicht mehr selbst aufruft, sondern direkt einen Wert zurückgibt. Ohne Basisfall würde die Funktion unendlich weiterlaufen. Beispiel: fac(1) = 1 ist der Basisfall der Fakultätsfunktion.

Frage

Was versteht man unter dem Begriff 'Sichtbarkeit' (Scope) einer Variable?

Antwort

Der Bereich des Programms, in dem eine Variable bekannt ist und verwendet werden kann. Variablen, die in einer Funktion definiert sind, haben einen lokalen Scope und sind außerhalb nicht sichtbar.

Frage

Was passiert, wenn man einer Funktion weniger Argumente übergibt, als sie Parameter deklariert hat?

Antwort

In JavaScript erhalten die fehlenden Parameter den Wert undefined. TypeScript würde dies bereits im Compiler als Fehler markieren, es sei denn, die Parameter wurden als optional (?) deklariert.

Übungsfragen

Was ist der Rückgabetyp einer Funktion, die nichts zurückgibt?

Was ist eine Callback-Funktion?

Was macht das Schlüsselwort return in einer Funktion?

Wie kennzeichnet man einen optionalen Parameter in einer TypeScript-Funktionsdeklaration?