Funktionen
Funktionen bündeln Code, geben Werte zurück und sind in JavaScript selbst Werte, die man weiterreichen kann.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Deklaration und Rückgabe
function definiert eine benannte Funktion.
return beendet sie und liefert einen Wert.
Ohne return liefert eine Funktion undefined.
function sum(a, b) {
return a + b;
}
sum(2, 3); // 5Arrow Functions
Die Pfeilschreibweise ist kompakt: (a, b) => a + b.
Bei genau einem Ausdruck ist return implizit. Arrow Functions binden außerdem kein eigenes this.
const sum = (a, b) => a + b;
const double = (n) => n * 2;
double(21); // 42Parameter und Standardwerte
Parameter können Standardwerte haben, die greifen, wenn kein Argument übergeben wird.
Funktionen sind Werte: Sie lassen sich in Variablen speichern und als Argumente übergeben — die Basis für Callbacks.
function greet(name = 'Gast') {
return `Hallo ${name}!`;
}
greet(); // 'Hallo Gast!'
greet('Ada'); // 'Hallo Ada!'Vertiefung
Funktionen sind Werte
In JavaScript sind Funktionen Objekte erster Klasse: Du kannst sie in Variablen speichern, als Argument übergeben und zurückgeben. Genau darauf bauen Callbacks, Array-Methoden und Events.
Arrow Functions sind kurz, haben aber kein eigenes this. Für Objektmethoden ist die klassische Methode oder eine normale function oft die bessere Wahl.
const doppelt = (n) => n * 2;
const anwenden = (fn, wert) => fn(wert);
anwenden(doppelt, 21); // 42Merksatz: Funktionen sind wiederverwendbare Werte. Klarer Name, klare Parameter, klarer Rückgabewert.
Übungsaufgabe
Notenrechner
Schreibe drei Funktionen: summe, durchschnitt und beste. Teste sie mit einem Array von Punktzahlen.
Das soll dein Programm können
- Drei Funktionen mit Rückgabewert
- Eine Arrow Function verwenden
- Einen Standardparameter verwenden
- Ergebnisse in der Konsole ausgeben
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Beginne mit summe. Für den Durchschnitt: summe(werte) / werte.length. Ein Standardwert kann ein leeres Array absichern.
Lösung anzeigen
const punkte = [72, 91, 64, 88];
function summe(werte = []) {
return werte.reduce((sum, wert) => sum + wert, 0);
}
const durchschnitt = (werte = []) =>
werte.length === 0 ? 0 : summe(werte) / werte.length;
function beste(werte = []) {
return werte.length === 0 ? 0 : Math.max(...werte);
}
console.log(summe(punkte));
console.log(durchschnitt(punkte));
console.log(beste(punkte));Warum funktioniert das?
summe nutzt reduce, durchschnitt ist eine Arrow Function und beste verwendet Math.max mit Spread. Standardwerte verhindern Fehler bei leeren Arrays.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.