Kurz: Eine Funktion ist ein benannter Codeblock, den du beliebig oft aufrufen kannst. Sie vermeidet Wiederholungen und gliedert dein Programm.
Teil des Kurses JavaScript
Kapitel 10 von 40 im Kurs JavaScript (Abschnitt „Funktionen“). Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.
Eine Funktion ist ein benannter Codeblock, den du beliebig oft aufrufen kannst. Sie vermeidet Wiederholungen und gliedert dein Programm.
Definition und Aufruf
function begruessen(name) {
return "Hallo " + name + "!";
}
console.log(begruessen("Mia"));
console.log(begruessen("Tom"));Ausgabe:
Hallo Mia!
Hallo Tom!functionleitet die Definition ein, danach kommen Name, Parameter in( )und der Rumpf in{ }.returngibt einen Wert zurück und beendet die Funktion. Ohnereturngibt sieundefinedzurück.- Parameter stehen in der Definition, Argumente beim Aufruf.
Mehrere Parameter und Standardwerte
function potenz(basis, exponent = 2) {
return basis ** exponent;
}
console.log(potenz(5));
console.log(potenz(2, 10));
function kaffee(groesse = "mittel", mit = "Milch") {
return `${groesse} mit ${mit}`;
}
console.log(kaffee(), "|", kaffee("klein"), "|", kaffee(undefined, "Hafermilch"));Ausgabe:
25
1024
mittel mit Milch | klein mit Milch | mittel mit HafermilchRest-Parameter
Mit ... fängst du beliebig viele Argumente als Array:
function summe(...zahlen) {
let s = 0;
for (const z of zahlen) s += z;
return s;
}
console.log(summe(1, 2, 3), summe(), summe(10, 20, 30, 40));
console.log(Math.max(...[3, 9, 2])); // Spread: Array als ArgumenteAusgabe:
6 0 100
9Funktionsausdrücke
Funktionen sind Werte: Du kannst sie in Variablen speichern, übergeben und zurückgeben.
const quadrat = function (x) { return x * x; };
console.log(quadrat(7));
function wendeAn(f, wert) { return f(wert); }
console.log(wendeAn(quadrat, 5));
console.log(wendeAn(Math.sqrt, 81));
console.log(typeof quadrat, quadrat.name, quadrat.length);Ausgabe:
49
25
9
function quadrat 1Funktionen mit Objekt als Parameter
Bei vielen Parametern ist ein Objekt mit Namen lesbarer als eine lange Liste:
function benutzer({ name, alter = 18, rolle = "Gast" }) {
return `${name} (${alter}, ${rolle})`;
}
console.log(benutzer({ name: "Mia" }));
console.log(benutzer({ name: "Tom", rolle: "Admin", alter: 30 }));Ausgabe:
Mia (18, Gast)
Tom (30, Admin)Mehrere Werte zurückgeben
Eine Funktion liefert einen Wert. Für mehrere gibst du ein Array oder Objekt zurück und zerlegst es:
function minMax(zahlen) {
return { min: Math.min(...zahlen), max: Math.max(...zahlen) };
}
const { min, max } = minMax([4, 9, 1, 7]);
console.log(min, max);Ausgabe:
1 9Hoisting
Funktionsdeklarationen werden “nach oben gezogen”: Du kannst sie schon vor ihrer Zeile aufrufen. Bei const f = function... geht das nicht.
console.log(hallo()); // funktioniert
function hallo() { return "bereits da"; }Ausgabe:
bereits daRekursion
Eine Funktion kann sich selbst aufrufen. Es braucht immer eine Abbruchbedingung:
function fakultaet(n) {
if (n <= 1) return 1;
return n * fakultaet(n - 1);
}
console.log(fakultaet(5), fakultaet(10));
const fib = (n) => (n < 2 ? n : fib(n - 1) + fib(n - 2));
console.log(fib(15));Ausgabe:
120 3628800
610Reine Funktionen
Eine reine Funktion liefert bei gleicher Eingabe immer dasselbe Ergebnis und ändert nichts außerhalb. Solche Funktionen sind leicht zu testen und zu verstehen.
Merke
function name(parameter) { return wert; }- Ohne
returnist das Ergebnisundefined - Standardwerte (
x = 1), Rest-Parameter (...args), Objekt-Parameter - Funktionen sind Werte und können übergeben werden
- Rekursion braucht eine Abbruchbedingung
Übungsaufgabe
Schreibe eine Funktion istPrimzahl(n) und gib alle Primzahlen bis 50 aus.
Quiz zur Selbstkontrolle
Was gibt eine Funktion ohne return zurück?
- undefined (richtig)
- null
- 0
- ""
Wofür stehen die drei Punkte in function f(...args)?
- Rest-Parameter: sammeln beliebig viele Argumente in einem Array (richtig)
- Sie sind ein Kommentar
- Sie kopieren die Funktion
- Sie sind ein Fehler
Was braucht jede Rekursion?
- Eine Abbruchbedingung (richtig)
- Eine Schleife
- Eine globale Variable
- Mindestens zwei Parameter
Weiter im Kurs
Zurück: Schleifen
Weiter: Arrow-Funktionen
Alle Kapitel: JavaScript im Überblick