JavaScript-Funktionen: Deklaration, Parameter und Arrow Functions

Im vorigen Kapitel ging es um Schleifen und Anweisungen zur Ablaufsteuerung, mit denen du steuerst, welcher Code wann läuft. In diesem Teil des Tutorials kommt ein weiterer wichtiger Baustein von JavaScript dazu: die Funktionen.

Funktionen sind Codeblöcke, die sich beliebig oft ausführen lassen. Du definierst eine Aufgabe einmal und rufst sie mehrfach auf, ohne den Code jedes Mal neu zu schreiben. Das macht deinen Code effizienter und leichter wartbar, weil eine einmal definierte Aufgabe an beliebig vielen Stellen im Code zum Einsatz kommt.

Beim Schreiben von Funktionen in JavaScript sind diese Punkte zu beachten:

• die Deklaration von Funktionen
• Argumente und Parameter
• der Rückgabewert von Funktionen
• Arrow Functions

Funktionen deklarieren

Es gibt zwei Wege, in JavaScript eine Funktion zu deklarieren: die Funktionsdeklaration und den Funktionsausdruck.

Funktionsdeklaration

function maFonction() {
  // auszuführender Code
}

Funktionsausdruck

const maFonction = function() {
  // auszuführender Code
}

Argumente und Parameter

Argumente sind die Werte, die einer Funktion beim Aufruf übergeben werden. Parameter sind die in der Funktionsdeklaration definierten Variablen, die diesen Argumenten entsprechen.

Ein Beispiel für eine Funktion mit einem Argument und einem Parameter:

function maFonction(parametre) {
  console.log(parametre);
}

maFonction('Bonjour'); // gibt 'Bonjour' in der Konsole aus

Der Rückgabewert von Funktionen

Funktionen geben mit der Anweisung „return“ einen Wert zurück. Gibt eine Funktion keinen Wert zurück, gilt ihr Rückgabewert als „undefined“.

function maFonction() {
  return 'Bonjour';
}

console.log(maFonction()); // gibt 'Bonjour' in der Konsole aus

Mit einem Objekt oder einem Array gibst du auch mehrere Werte aus einer Funktion zurück:

function maFonction() {
  return {
    message: 'Bonjour',
    nombre: 42
  };
}

console.log(maFonction());
// gibt { message: 'Bonjour', nombre: 42 } in der Konsole aus

function maFonction() {
  return [1, 2, 3];
}

console.log(maFonction()); // gibt [1, 2, 3] in der Konsole aus

Sobald die Anweisung „return“ ausgeführt wird, bricht die Funktion sofort ab und der Code dahinter läuft nicht mehr. Ein Beispiel, das das zeigt:

function maFonction() {
  return 'Bonjour';
  console.log('Ce message ne sera jamais affiché');
}

console.log(maFonction()); // gibt 'Bonjour' in der Konsole aus

Arrow Functions

Arrow Functions (auf Deutsch auch „Pfeilfunktionen“) sind eine kompaktere Schreibweise für Funktionen in JavaScript. Sie sind vor allem dann praktisch, wenn du eine einfache Funktion brauchst, die keinen vollständigen Rumpf benötigt.

const maFonction = () => {
  // auszuführender Code
};

Besteht der Funktionsrumpf aus einem einzigen Ausdruck, können Sie die geschweiften Klammern und das Schlüsselwort return weglassen: Der Wert des Ausdrucks wird zurückgegeben. Die runden Klammern bleiben dagegen Pflicht, wenn die Funktion keinen Parameter hat:

const maFonction = () => console.log('Bonjour');

Fazit

Funktionen sind ein zentraler Baustein von JavaScript und die Voraussetzung für effizienten, wartbaren Code. Wenn du Funktionsdeklaration, Argumente und Parameter, Rückgabewerte und Arrow Functions sicher beherrschst, schreibst du leistungsfähige und nützliche Funktionen für deine Anwendungen.

Im nächsten Kapitel geht es um ein weiteres wichtiges Konzept in JavaScript: die Objekte. Du siehst dort, wie du Objekte anlegst und einsetzt, um Daten strukturiert zu speichern und zu verarbeiten.