JavaScript 5 — Funktionen

In dieser Lektion lernst du Funktionen kennen – eines der wichtigsten Konzepte in JavaScript. Funktionen erlauben es, Code zu strukturieren, wiederzuverwenden und logisch zu kapseln. Ohne Funktionen wären größere Programme praktisch unwartbar.

1. Was ist eine Funktion?

Definition.
Eine Funktion ist ein benannter Codeblock, der eine bestimmte Aufgabe erfüllt und bei Bedarf aufgerufen werden kann.

Eine Funktion kann:

Eingaben erhalten (Parameter)
Code ausführen
einen Wert zurückgeben (return)

function greet() {
  console.log("Hallo!");
}

Die Funktion wird erst ausgeführt, wenn sie aufgerufen wird:

greet();

2. Funktionen mit Parametern

Parameter sind Platzhalter für Werte, die beim Funktionsaufruf übergeben werden.

function greet(name) {
  console.log("Hallo " + name);
}

greet("Iman");
greet("Welt");

Parameter sind nur innerhalb der Funktion sichtbar (Gültigkeitsbereich / Scope).

3. Rückgabewerte (return)

Mit return gibt eine Funktion einen Wert zurück und beendet ihre Ausführung.

function add(a, b) {
  return a + b;
}

let result = add(3, 4);
console.log(result); // 7

Ohne return gibt eine Funktion automatisch undefined zurück.

4. Mehrere Rückgabepfade

Eine Funktion kann abhängig von Bedingungen an unterschiedlichen Stellen return ausführen.

function checkAge(age) {
  if (age < 18) {
    return "Minderjährig";
  }
  return "Volljährig";
}

5. Funktionsdeklaration vs. Funktionsausdruck

5.1 Funktionsdeklaration

function square(x) {
  return x * x;
}

Funktionsdeklarationen werden vor dem eigentlichen Code „bekannt gemacht“ (Hoisting).

5.2 Funktionsausdruck

const square = function(x) {
  return x * x;
};

Funktionsausdrücke werden erst verfügbar, nachdem die Zuweisung ausgeführt wurde.

6. Arrow Functions (Pfeilfunktionen)

Arrow Functions sind eine kürzere Syntax für Funktionsausdrücke und werden in modernem JavaScript sehr häufig verwendet.

const add = (a, b) => {
  return a + b;
};

Bei einer einzelnen Rückgabe kann return weggelassen werden:

const add = (a, b) => a + b;

Arrow Functions verhalten sich bei this anders – das ist später wichtig, hier aber noch nicht entscheidend.

7. Standardparameter

Funktionen können Standardwerte für Parameter besitzen, falls kein Argument übergeben wird.

function greet(name = "Gast") {
  console.log("Hallo " + name);
}

greet();
greet("Iman");

8. Funktionen aufrufen vs. referenzieren

Es gibt einen wichtigen Unterschied zwischen Funktionsaufruf und Funktionsreferenz.

function sayHi() {
  console.log("Hi");
}

sayHi();   // Aufruf
sayHi;     // Referenz (wird nicht ausgeführt)

Das ist besonders wichtig bei Event-Handlern und Callbacks.

9. Funktionen als Werte

In JavaScript sind Funktionen „First-Class Citizens“: Sie können wie normale Werte behandelt werden.

function greet() {
  console.log("Hallo");
}

const action = greet;
action();

10. Gültigkeitsbereich (Scope)

Variablen, die in einer Funktion deklariert werden, sind außerhalb der Funktion nicht sichtbar.

function test() {
  let x = 10;
}

console.log(x); // Fehler

Scope schützt vor Namenskonflikten und ungewollten Seiteneffekten.

11. Gute Praxis

Eine Funktion = eine klare Aufgabe
Sprechende Funktionsnamen
Kurze Funktionen bevorzugen
Seiteneffekte minimieren

Gut:

function calculateTotal(price, taxRate) {
  return price * (1 + taxRate);
}

12. Übungen

Übung 1.
Schreibe eine Funktion, die zwei Zahlen multipliziert und das Ergebnis zurückgibt.

Übung 2.
Schreibe eine Funktion, die prüft, ob eine Zahl gerade oder ungerade ist.

Übung 3.
Schreibe eine Arrow Function, die den größeren von zwei Werten zurückgibt.

13. Zusammenfassung

Funktionen strukturieren und kapseln Code
Parameter und Rückgabewerte machen Funktionen flexibel
Arrow Functions sind moderner Standard
Scope ist entscheidend für sauberen Code

Wer Funktionen beherrscht, beherrscht die Struktur von JavaScript.