Funktionen und Arrow Functions in JavaScript

Funktionen sind eines der wichtigsten Werkzeuge in JavaScript. Sie bündeln Code, den du immer wieder verwenden möchtest, und machen deine Programme übersichtlicher. In diesem Beitrag schauen wir uns an, wie du Funktionen schreibst, was Parameter und Rückgabewerte sind und warum die kompakten Arrow Functions so beliebt sind.

Was ist eine Funktion?

Eine Funktion ist ein wiederverwendbarer Codeblock, den du über einen Namen aufrufst. Du definierst sie einmal und kannst sie danach beliebig oft nutzen. Das folgt dem berühmten Prinzip DRY (Don't Repeat Yourself).

function begruessen(name) {
  return "Hallo, " + name + "!";
}

console.log(begruessen("Lisa")); // Hallo, Lisa!
console.log(begruessen("Tom"));  // Hallo, Tom!

Hier ist name ein Parameter. Beim Aufruf übergibst du ein Argument wie "Lisa". Mit return gibt die Funktion einen Wert zurück.

Parameter und Rückgabewerte

Funktionen können mehrere Parameter haben und einen Wert zurückgeben. Ohne return liefert eine Funktion automatisch undefined.

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

const summe = addieren(3, 4);
console.log(summe); // 7

// Standardwerte für Parameter
function begruessenMitStandard(name = "Gast") {
  return "Willkommen, " + name;
}
console.log(begruessenMitStandard()); // Willkommen, Gast

Funktionsausdrücke

Du kannst eine Funktion auch in einer Variablen speichern. Das nennt man Funktionsausdruck (function expression). Solche Funktionen sind oft anonym, haben also keinen eigenen Namen.

const multiplizieren = function(a, b) {
  return a * b;
};

console.log(multiplizieren(5, 6)); // 30

Arrow Functions: die kompakte Schreibweise

Seit ES6 gibt es Arrow Functions. Sie sind kürzer und besonders praktisch für kleine Funktionen. Statt des Schlüsselworts function nutzt du den Pfeil =>.

// Klassisch
const quadrat1 = function(x) {
  return x * x;
};

// Als Arrow Function
const quadrat2 = (x) => {
  return x * x;
};

// Noch kürzer bei nur einem Ausdruck
const quadrat3 = x => x * x;

console.log(quadrat3(4)); // 16

Bei nur einem Parameter kannst du die Klammern weglassen. Besteht der Funktionskörper nur aus einem Ausdruck, entfällt sogar das return und die geschweiften Klammern. Das Ergebnis wird automatisch zurückgegeben.

Ein wichtiger Unterschied: this

Arrow Functions sind nicht nur kürzer, sie verhalten sich auch anders beim Schlüsselwort this. Eine Arrow Function hat kein eigenes this, sondern übernimmt es aus ihrer Umgebung. Das ist besonders bei Callbacks praktisch.

const zahlen = [1, 2, 3];

// Arrow Function als Callback
const verdoppelt = zahlen.map(n => n * 2);
console.log(verdoppelt); // [2, 4, 6]

Für die meisten alltäglichen Aufgaben wie Callbacks in map, filter oder forEach sind Arrow Functions die erste Wahl. Klassische Funktionen brauchst du noch, wenn du ein eigenes this benötigst oder eine Methode in einem Objekt definierst.

Fazit

Funktionen helfen dir, Code zu strukturieren und Wiederholungen zu vermeiden. Du kennst jetzt klassische Funktionsdeklarationen, Funktionsausdrücke und die kompakten Arrow Functions. Als Faustregel gilt: Nutze Arrow Functions für kurze Callbacks und klassische Funktionen, wenn du ein eigenes this brauchst. Übe das Schreiben eigener Funktionen, denn sie begegnen dir in jedem JavaScript-Projekt.