Funktionen sind wiederverwendbare Codeblöcke – höchste Zeit, unsere Kategorie-Icon-Logik aus Kapitel 6 in eine echte Funktion zu verwandeln, statt sie jedes Mal neu zu schreiben.

Function Declarations

function ermittleIcon(kategorie) {
  switch (kategorie) {
    case 'Miete':
      return '????';
    case 'Gehalt':
      return '????';
    case 'Freizeit':
      return '????';
    default:
      return '????';
  }
}

console.log(ermittleIcon('Miete')); // '????'

return beendet die Funktion SOFORT und liefert den angegebenen Wert zurück – Code danach im selben Funktionskörper wird nicht mehr ausgeführt. Eine Funktion OHNE return-Anweisung gibt implizit undefined zurück.

Parameter vs. Argumente

Ein feiner, oft synonym verwendeter Unterschied: Parameter sind die Platzhalter in der Funktionsdefinition (kategorie oben), Argumente sind die tatsächlichen Werte, die beim Aufruf übergeben werden ('Miete' oben).

Default-Parameter

function formatiereBetrag(betrag, waehrung = 'EUR') {
  return `${betrag.toFixed(2)} ${waehrung}`;
}

console.log(formatiereBetrag(2400));        // '2400.00 EUR'
console.log(formatiereBetrag(2400, 'USD'));  // '2400.00 USD'

Ein Default-Wert greift NUR, wenn das Argument undefined ist (nicht bereits vorhanden) oder explizit weggelassen wird – formatiereBetrag(2400, undefined) nutzt ebenfalls 'EUR', formatiereBetrag(2400, null) hingegen NICHT, da null ein bewusst gesetzter Wert ist.

Rest-Parameter: beliebig viele Argumente

function summiere(...betraege) {
  let summe = 0;
  for (const betrag of betraege) {
    summe += betrag;
  }
  return summe;
}

console.log(summiere(100, 200, 50));    // 350
console.log(summiere(2400, -850, -300, -120)); // 1130

...betraege sammelt ALLE übergebenen Argumente in einem echten Array ein – mehr zum ...-Syntax (der auch als Spread-Operator in anderer Rolle auftritt) in Kapitel 13.

Function Declarations werden gehoisted

Eine Besonderheit, die function declarations von den meisten anderen Deklarationen unterscheidet: Sie können VOR ihrer eigentlichen Definition im Code aufgerufen werden, weil die Engine die komplette Funktionsdefinition beim Einlesen der Datei bereits vollständig registriert ("hoisting", vertieft in Kapitel 15):

console.log(verdoppleWert(21)); // 42 - funktioniert, obwohl der Aufruf VOR der Definition steht!

function verdoppleWert(wert) {
  return wert * 2;
}

Function Expressions

Alternativ lässt sich eine Funktion auch als AUSDRUCK einer Variable zuweisen – dieser Form fehlt das Hoisting-Verhalten von oben, die Variable muss VOR dem Aufruf zugewiesen sein:

const verdreifacheWert = function (wert) {
  return wert * 3;
};

console.log(verdreifacheWert(10)); // 30