Frontend Academy · Lektion

Funktionen: Deklarationen, Ausdrücke, Arrow Functions

Definieren Sie Funktionen auf drei Arten, verstehen Sie Hoisting, verwenden Sie Parameter und Rückgabewerte und schreiben Sie kompakte Arrow Functions.

Funktionen: Deklarationen, Ausdrücke, Arrow Functions ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind Funktionen?

Funktionen sind wiederverwendbare Codeblöcke. Sie nehmen Eingaben (Parameter) entgegen, führen Logik aus und geben optional ein Ergebnis zurück. Funktionen sind in JavaScript Werte erster Klasse – sie können Variablen zugewiesen, als Argumente übergeben und von anderen Funktionen zurückgegeben werden.

Funktionsdeklarationen

Eine Funktionsdeklaration erstellt mit dem Schlüsselwort function eine benannte Funktion. Deklarationen werden hochgezogen – Sie können sie aufrufen, bevor sie im Code erscheinen.

function greet(name) {
  return `Hello, ${name}!`;
}

// Can call before declaration due to hoisting:
console.log(greet('Alice')); // 'Hello, Alice!'

Funktionsausdrücke

Ein Funktionsausdruck weist einer Variablen eine Funktion zu. Er wird nicht hochgezogen (die Variable wird als undefined hochgezogen). Funktionsausdrücke können anonym oder benannt sein.

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

console.log(multiply(3, 4)); // 12

// Named function expression (name useful in stack traces):
const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

Pfeilfunktionen

Pfeilfunktionen sind eine kompakte Syntax, die mit ES6 eingeführt wurde. Sie haben kein eigenes this, sondern übernehmen this aus dem umschließenden Scope. Sie eignen sich besonders für Callbacks und kurze Funktionen.

// Standard arrow:
const add = (a, b) => a + b;

// Single parameter (no parens needed):
const double = n => n * 2;

// No parameters:
const greet = () => 'Hello!';

// Multi-line body needs {} and return:
const process = (x) => {
  const result = x * 2;
  return result + 1;
};

Parameter und Argumente

Parameter sind die Namen in der Funktionsdefinition. Argumente sind die Werte, die beim Aufruf der Funktion übergeben werden. Zusätzliche Argumente werden ignoriert; fehlende Argumente sind undefined.

function info(name, age) {
  console.log(`${name} is ${age}`);
}
info('Alice', 30); // 'Alice is 30'
info('Bob');       // 'Bob is undefined'

Standardparameter

Mit ES6 können Sie Standardwerte für Parameter festlegen. Der Standardwert wird verwendet, wenn das Argument undefined ist, auch wenn es überhaupt nicht übergeben wurde.

function greet(name = 'World') {
  return `Hello, ${name}!`;
}
console.log(greet());        // 'Hello, World!'
console.log(greet('Alice')); // 'Hello, Alice!'

Die Anweisung return

Funktionen geben standardmäßig undefined zurück. Verwenden Sie return, um einen Wert zurückzugeben. Eine Funktion wird beim ersten return beendet, das sie erreicht – nachfolgender Code wird nicht ausgeführt.

function divide(a, b) {
  if (b === 0) return null; // early return
  return a / b;
}
console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // null

Rest-Parameter

Der Rest-Parameter ...args sammelt alle übrigen Argumente in einem Array. Er muss der letzte Parameter sein. In modernem Code ersetzt er das alte arguments-Objekt.

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

Funktionen als Werte (First-Class)

Funktionen können in Variablen gespeichert, anderen Funktionen als Argumente (Callbacks) übergeben und von Funktionen zurückgegeben werden. Das ermöglicht leistungsfähige Muster wie Array-Methoden und Event-Listener.

const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort((a, b) => a - b); // callback
console.log(sorted); // [1, 1, 3, 4, 5]

Reine Funktionen

Eine reine Funktion gibt für dieselben Eingaben immer dasselbe Ergebnis zurück und hat keine Seiteneffekte (keine DOM-Änderungen, keine Netzwerkaufrufe und keine Änderungen an globalen Werten). Reine Funktionen lassen sich leicht testen, debuggen und nachvollziehen.

// Pure:
const add = (a, b) => a + b;

// Impure (side effect: mutates external state):
let total = 0;
function addToTotal(n) { total += n; }

Sofort aufgerufene Funktionsausdrücke (IIFE)

Eine IIFE wird sofort ausgeführt, sobald sie definiert ist. Früher wurde sie häufig verwendet, um einen privaten Scope zu erstellen. Mit Modulen und Block-Scope ist sie heute weniger erforderlich, aber in älteren Codebasen noch anzutreffen.

(function () {
  const secret = 'hidden';
  console.log('IIFE ran');
})();
// secret is not accessible here

Kurztest

Welche der folgenden Aussagen über Pfeilfunktionen ist richtig?

Zusammenfassung: JavaScript-Funktionen

Funktionsdeklarationen werden hochgezogen. Funktionsausdrücke und Pfeilfunktionen werden nicht hochgezogen. Pfeilfunktionen sind kompakt und haben kein eigenes this. Verwenden Sie Standardparameter, um mit fehlenden Argumenten umzugehen. Funktionen sind Werte erster Klasse – übergeben Sie sie problemlos an andere Stellen.

Häufig gestellte Fragen

Ist die Lektion „Funktionen: Deklarationen, Ausdrücke, Arrow Functions“ kostenlos?

Ja — der vollständige Text von „Funktionen: Deklarationen, Ausdrücke, Arrow Functions“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Funktionen: Deklarationen, Ausdrücke, Arrow Functions“?

Definieren Sie Funktionen auf drei Arten, verstehen Sie Hoisting, verwenden Sie Parameter und Rückgabewerte und schreiben Sie kompakte Arrow Functions. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Funktionen: Deklarationen, Ausdrücke, Arrow Functions“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Variablen: let, const, var und Geltungsbereich
Datentypen: string, number, boolean, null, undefined
Funktionen: Deklarationen, Ausdrücke, Arrow Functions
Kontrollfluss: if, else, switch, for, while

← Zurück zu Frontend Academy