tutorials / javascript-funktionen-grundlagen

JavaScript Funktionen Grundlagen: Von Declarations bis Rest-Params

beginner
javascriptbeginnerfunctionsclean-code

Funktionen sind das Herzstück jeder JavaScript-Anwendung. Sie erlauben es dir, Code zu kapseln, wiederzuverwenden und Logik sauber zu strukturieren. In diesem Tutorial schauen wir uns an, wie du Funktionen definierst, wie Parameter funktionieren und wie du mit modernen Features wie Default-Werten und Rest-Parametern arbeitest.

Was ist eine Funktion?

Stell dir eine Funktion wie ein Kochrezept vor: Du gibst Zutaten hinein (Parameter), verarbeitest sie (Funktionskörper) und erhältst am Ende ein Ergebnis (Rückgabewert).

1. Function Declaration vs. Function Expression

In JavaScript gibt es zwei klassische Wege, eine Funktion zu definieren.

Function Declaration (Die Klassische)

Diese Funktionen werden “gehoistet”, das heißt, du kannst sie aufrufen, noch bevor sie im Code definiert wurden.

function sagHallo(name) {
  return `Hallo, ${name}!`;
}

console.log(sagHallo("Mia")); // "Hallo, Mia!"

Function Expression (Die Moderne)

Hier speicherst du eine anonyme Funktion in einer Variable. Diese Funktionen werden nicht gehoistet.

const sagTschuess = function(name) {
  return `Tschüss, ${name}!`;
};

console.log(sagTschuess("Ben")); // "Tschüss, Ben!"

Tipp: Nutze heutzutage meistens const für Function Expressions, um sicherzustellen, dass die Funktion nicht versehentlich überschrieben wird.

2. Parameter und Argumente

  • Parameter sind die Platzhalter in der Funktionsdefinition (z. B. name).
  • Argumente sind die tatsächlichen Werte, die du beim Aufruf übergibst (z. B. "Mia").

Default-Parameter

Früher mussten wir manuell prüfen, ob ein Wert übergeben wurde. Heute setzen wir Standardwerte direkt in der Definition:

function begrüßung(name = "Gast", tageszeit = "Tag") {
  return `Guten ${tageszeit}, ${name}!`;
}

console.log(begrüßung()); // "Guten Tag, Gast!"
console.log(begrüßung("Lukas", "Abend")); // "Guten Abend, Lukas!"

3. Der Rest-Parameter (...)

Manchmal weißt du vorher nicht, wie viele Argumente übergeben werden. Hier hilft der Rest-Parameter. Er sammelt alle “restlichen” Argumente in einem echten Array.

function summiereAlles(...zahlen) {
  return zahlen.reduce((total, n) => total + n, 0);
}

console.log(summiereAlles(1, 2, 3)); // 6
console.log(summiereAlles(10, 20, 30, 40, 50)); // 150

Wichtig: Es darf nur einen Rest-Parameter pro Funktion geben, und er muss immer an letzter Stelle stehen.

4. Rückgabewerte (Return)

Eine Funktion ohne return gibt standardmäßig undefined zurück. Sobald return ausgeführt wird, wird die Funktion sofort beendet.

function checkAlter(alter) {
  if (alter < 18) {
    return "Zu jung!";
  }
  return "Willkommen!";
  console.log("Dieser Code wird nie ausgeführt.");
}

5. Best Practices für saubere Funktionen

Damit dein Code wartbar bleibt, beachte diese Faustregeln:

  1. Do One Thing: Eine Funktion sollte genau eine Aufgabe haben.
  2. Keep it Small: Wenn eine Funktion länger als 20-30 Zeilen wird, teile sie auf.
  3. Naming: Nutze Verben (z. B. calculateTotal, fetchUser).

Mehr dazu findest du im passenden Blog-Post: Saubere Funktionen: Best Practices.

Übung: Der Preis-Rechner

Schreibe eine Funktion berechneGesamtpreis, die:

  1. Einen Basispreis als ersten Parameter nimmt.
  2. Einen Steuersatz (Default: 0.19) als zweiten Parameter nimmt.
  3. Beliebig viele Rabattwerte (Rest-Parameter) entgegennimmt, die vom Bruttopreis abgezogen werden.
// Deine Lösung hier
function berechneGesamtpreis(basis, steuer = 0.19, ...rabatte) {
  let brutto = basis * (1 + steuer);
  let abzug = rabatte.reduce((acc, r) => acc + r, 0);
  return Math.max(0, brutto - abzug);
}

console.log(berechneGesamtpreis(100, 0.19, 10, 5)); // 104

Zusammenfassung

Du hast gelernt, wie man Funktionen deklariert, wie man flexibel mit Parametern umgeht und warum saubere Funktionen so wichtig sind. Im nächsten Teil schauen wir uns die mächtigen Arrow Functions und Closures an.

Weiterführende Links: