JavaScript Functions

Functions (Funktionen) sind wiederverwendbare Code-Blöcke. Einmal schreiben, überall nutzen!

Was sind Functions?

Functions sind benannte Code-Blöcke die du aufrufen kannst:

Function Konzept

// Ohne Function (mühsam!)
console.log('Hallo Max!');
console.log('Hallo Anna!');
console.log('Hallo Tom!');

// Mit Function (elegant!)
function grüßen(name) {
    console.log('Hallo ' + name + '!');
}

grüßen('Max');   // Hallo Max!
grüßen('Anna');  // Hallo Anna!
grüßen('Tom');   // Hallo Tom!

Warum Functions?

✅ Code nicht wiederholen (DRY - Don't Repeat Yourself)
✅ Wiederverwendbar
✅ Übersichtlicher Code
✅ Leichter zu testen

Function Declaration - Klassische Funktion

Die Standard-Syntax:

Function Declaration

function funktionsName() {
    // Code hier
}

// Aufrufen
funktionsName();

// Beispiel
function sagHallo() {
    console.log('Hallo Welt!');
}

sagHallo();  // Hallo Welt!
sagHallo();  // Hallo Welt! (mehrfach nutzbar)

Syntax:

function Keyword
Name der Funktion
() Klammern (für Parameter)
Geschweifete Klammern (Code-Block)

Parameters - Werte übergeben

Functions können Daten empfangen:

Parameters

function grüßen(name) {
    console.log('Hallo ' + name);
}

grüßen('Max');   // Hallo Max
grüßen('Anna');  // Hallo Anna

// Mehrere Parameter
function addieren(a, b) {
    console.log(a + b);
}

addieren(5, 3);   // 8
addieren(10, 20); // 30

Terminologie:

Parameter: Variable in der Function-Definition (name)
Argument: Wert beim Function-Call ('Max')

Mehrere Parameter

Multiple Parameters

function vorstellen(name, alter, stadt) {
    console.log(`Ich bin ${name}, ${alter} Jahre alt und wohne in ${stadt}.`);
}

vorstellen('Max', 25, 'Berlin');
// Ich bin Max, 25 Jahre alt und wohne in Berlin.

vorstellen('Anna', 30, 'München');
// Ich bin Anna, 30 Jahre alt und wohne in München.

Default Parameters

Standard-Werte wenn Argument fehlt:

Default Parameters

function grüßen(name = 'Gast') {
    console.log('Hallo ' + name);
}

grüßen('Max');   // Hallo Max
grüßen();        // Hallo Gast (nutzt Default)

// Mehrere Defaults
function rechnen(a = 0, b = 0, operator = '+') {
    if (operator === '+') {
        return a + b;
    } else if (operator === '-') {
        return a - b;
    }
}

console.log(rechnen(5, 3));        // 8 (+ ist Default)
console.log(rechnen(5, 3, '-'));   // 2
console.log(rechnen());            // 0 (alle Defaults)

return - Werte zurückgeben

Functions können Werte zurückgeben:

return Statement

function addieren(a, b) {
    return a + b;  // Gibt Ergebnis zurück
}

const ergebnis = addieren(5, 3);
console.log(ergebnis);  // 8

const summe = addieren(10, 20);
console.log(summe);  // 30

// Direkt verwenden
console.log(addieren(100, 50));  // 150

Ohne return:

Mit vs. ohne return

// Ohne return (nur console.log)
function addierenOhneReturn(a, b) {
    console.log(a + b);
}

const x = addierenOhneReturn(5, 3);
console.log(x);  // undefined (kein return!)

// Mit return
function addierenMitReturn(a, b) {
    return a + b;
}

const y = addierenMitReturn(5, 3);
console.log(y);  // 8 (Wert zurückgegeben)

return stoppt die Function:

return stoppt Execution

function prüfeAlter(alter) {
    if (alter < 18) {
        return 'Zu jung';
        // Code danach wird nicht ausgeführt
    }

    if (alter > 100) {
        return 'Ungültig';
    }

    return 'OK';
}

console.log(prüfeAlter(16));   // Zu jung
console.log(prüfeAlter(25));   // OK
console.log(prüfeAlter(150));  // Ungültig

Arrow Functions - Moderne Syntax

Kürzere Schreibweise (ES6):

Arrow Function

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

// Arrow Function
const addieren = (a, b) => {
    return a + b;
};

// Noch kürzer (implicit return)
const addieren = (a, b) => a + b;

console.log(addieren(5, 3));  // 8

Syntax-Varianten:

Arrow Function Syntax

// Mehrere Parameter
const addieren = (a, b) => a + b;

// Ein Parameter (Klammern optional)
const verdoppeln = x => x * 2;
const verdoppeln2 = (x) => x * 2;  // Auch OK

// Kein Parameter
const grüßen = () => console.log('Hallo');

// Mehrere Zeilen
const rechnen = (a, b) => {
    const summe = a + b;
    const produkt = a * b;
    return summe + produkt;
};

// Object zurückgeben (Klammern nötig!)
const person = (name, alter) => ({ name: name, age: alter });
const person2 = (name, alter) => ({ name, alter });  // Shorthand

Function Declaration vs. Arrow Function

Vergleich

// Function Declaration
function quadrat(x) {
    return x * x;
}

// Arrow Function
const quadrat = x => x * x;

// Function Declaration mit Body
function istGerade(zahl) {
    if (zahl % 2 === 0) {
        return true;
    }
    return false;
}

// Arrow Function (kürzer!)
const istGerade = zahl => zahl % 2 === 0;

Wann was?

Function Declaration: Traditionell, hoisting
Arrow Function: Modern, kürzer, kein eigenes this

Function Expression

Function als Wert einer Variable:

Function Expression

// Function Expression
const grüßen = function(name) {
    console.log('Hallo ' + name);
};

grüßen('Max');  // Hallo Max

// Unterschied zu Declaration
// Declaration: Hoisting (vorher nutzbar)
sagHallo();  // ✅ Funktioniert

function sagHallo() {
    console.log('Hallo');
}

// Expression: Kein Hoisting
sagTschüss();  // ❌ Fehler: Cannot access before initialization

const sagTschüss = function() {
    console.log('Tschüss');
};

Scope - Gültigkeitsbereich

Wo sind Variables verfügbar?

Function Scope

function test() {
    const x = 10;  // Nur in Function verfügbar
    console.log(x);  // 10
}

test();
console.log(x);  // ❌ ReferenceError

// Jede Function hat eigenen Scope
function func1() {
    const name = 'Max';
    console.log(name);  // Max
}

function func2() {
    const name = 'Anna';
    console.log(name);  // Anna
}

func1();
func2();

Block vs. Function Scope

Block Scope

// let/const: Block Scope
if (true) {
    let x = 10;
    const y = 20;
    console.log(x, y);  // 10 20
}

console.log(x);  // ❌ Fehler
console.log(y);  // ❌ Fehler

// var: Function Scope (nicht Block!)
if (true) {
    var z = 30;
    console.log(z);  // 30
}

console.log(z);  // 30 (var ignoriert Block!)

Global vs. Local Scope

Global vs Local

// Global Scope
const globalVar = 'Ich bin global';

function test() {
    // Local Scope
    const localVar = 'Ich bin lokal';

    console.log(globalVar);  // ✅ Zugriff auf global
    console.log(localVar);   // ✅ Zugriff auf local
}

test();

console.log(globalVar);  // ✅ Funktioniert
console.log(localVar);   // ❌ Fehler (nicht verfügbar)

// Local überschreibt Global (Shadowing)
const name = 'Global';

function grüßen() {
    const name = 'Local';
    console.log(name);  // Local (überschattet global)
}

grüßen();
console.log(name);  // Global

Closures - Funktionen merken sich Scope

Functions "erinnern" sich an ihr Umfeld:

Closure

function erstellen Zähler() {
    let count = 0;  // Private Variable

    return function() {
        count++;
        return count;
    };
}

const zähler = erstellenZähler();

console.log(zähler());  // 1
console.log(zähler());  // 2
console.log(zähler());  // 3

// Jeder Zähler ist unabhängig
const zähler2 = erstellenZähler();
console.log(zähler2());  // 1 (eigener count)

Praktisches Beispiel:

Closure Beispiel

function erstellenMultiplikator(faktor) {
    return function(zahl) {
        return zahl * faktor;
    };
}

const verdoppeln = erstellenMultiplikator(2);
const verdreifachen = erstellenMultiplikator(3);

console.log(verdoppeln(5));     // 10 (5 * 2)
console.log(verdreifachen(5));  // 15 (5 * 3)

// Private Data mit Closure
function erstellenUser(name) {
    let passwort = 'geheim';  // Private!

    return {
        getName: () => name,
        checkPasswort: (input) => input === passwort
    };
}

const user = erstellenUser('Max');
console.log(user.getName());           // Max
console.log(user.checkPasswort('geheim'));  // true
console.log(user.passwort);            // undefined (nicht zugreifbar!)

Callback Functions

Functions als Argumente:

Callbacks

function verarbeiten(zahl, callback) {
    const ergebnis = zahl * 2;
    callback(ergebnis);
}

function ausgeben(wert) {
    console.log('Ergebnis:', wert);
}

verarbeiten(5, ausgeben);  // Ergebnis: 10

// Mit Arrow Function
verarbeiten(10, (wert) => {
    console.log('Wert ist:', wert);
});
// Wert ist: 20

// Praktisch: Array Methods
const zahlen = [1, 2, 3, 4, 5];

zahlen.forEach((zahl) => {
    console.log(zahl * 2);
});

const verdoppelt = zahlen.map((zahl) => zahl * 2);
console.log(verdoppelt);  // [2, 4, 6, 8, 10]

Higher-Order Functions

Functions die Functions zurückgeben oder empfangen:

Higher-Order Functions

// Function nimmt Function
function wiederholen(n, action) {
    for (let i = 0; i < n; i++) {
        action(i);
    }
}

wiederholen(3, (i) => {
    console.log('Durchgang ' + i);
});
// Durchgang 0
// Durchgang 1
// Durchgang 2

// Function gibt Function zurück
function erstellenGrüßer(begrüßung) {
    return (name) => {
        console.log(`${begrüßung}, ${name}!`);
    };
}

const deutschGrüßen = erstellenGrüßer('Hallo');
const englischGrüßen = erstellenGrüßer('Hello');

deutschGrüßen('Max');   // Hallo, Max!
englischGrüßen('Anna'); // Hello, Anna!

IIFE - Immediately Invoked Function Expression

Function wird sofort ausgeführt:

IIFE

// IIFE Syntax
(function() {
    console.log('Sofort ausgeführt!');
})();

// Mit Parameter
(function(name) {
    console.log('Hallo ' + name);
})('Max');

// Mit Arrow Function
(() => {
    console.log('Arrow IIFE');
})();

// Wozu? Private Scope
(function() {
    const privateVar = 'Geheim';
    console.log(privateVar);  // Funktioniert
})();

console.log(privateVar);  // ❌ Fehler (nicht verfügbar)

Rest Parameters

Beliebig viele Argumente:

Rest Parameters

function addieren(...zahlen) {
    let summe = 0;
    for (const zahl of zahlen) {
        summe += zahl;
    }
    return summe;
}

console.log(addieren(1, 2, 3));        // 6
console.log(addieren(10, 20, 30, 40)); // 100
console.log(addieren(5));              // 5

// Mit normalen Parametern
function grüßen(begrüßung, ...namen) {
    namen.forEach(name => {
        console.log(`${begrüßung}, ${name}!`);
    });
}

grüßen('Hallo', 'Max', 'Anna', 'Tom');
// Hallo, Max!
// Hallo, Anna!
// Hallo, Tom!

Praktische Beispiele

Beispiel 1: Rechner

Calculator Functions

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

function subtrahieren(a, b) {
    return a - b;
}

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

function dividieren(a, b) {
    if (b === 0) {
        return 'Fehler: Division durch 0';
    }
    return a / b;
}

console.log(addieren(10, 5));      // 15
console.log(subtrahieren(10, 5));  // 5
console.log(multiplizieren(10, 5));// 50
console.log(dividieren(10, 5));    // 2
console.log(dividieren(10, 0));    // Fehler

Beispiel 2: Validierung

Validation Functions

function istEmail(email) {
    return email.includes('@') && email.includes('.');
}

function istStarkesPasswort(passwort) {
    return passwort.length >= 8;
}

function istErwachsen(alter) {
    return alter >= 18;
}

// Nutzen
const email = 'max@example.com';
const passwort = 'geheim123';
const alter = 25;

if (istEmail(email)) {
    console.log('✅ Gültige Email');
}

if (istStarkesPasswort(passwort)) {
    console.log('✅ Starkes Passwort');
}

if (istErwachsen(alter)) {
    console.log('✅ Volljährig');
}

Beispiel 3: String Utilities

String Functions

function kapitalisieren(text) {
    return text[0].toUpperCase() + text.slice(1).toLowerCase();
}

function umkehren(text) {
    return text.split('').reverse().join('');
}

function zähleWörter(text) {
    return text.trim().split(/\s+/).length;
}

function istPalindrom(text) {
    const cleaned = text.toLowerCase().replace(/[^a-z]/g, '');
    return cleaned === umkehren(cleaned);
}

console.log(kapitalisieren('hallo'));      // Hallo
console.log(umkehren('Hallo'));            // ollaH
console.log(zähleWörter('Hallo Welt'));    // 2
console.log(istPalindrom('Anna'));         // true
console.log(istPalindrom('Hallo'));        // false

Beispiel 4: Array Utilities

Array Functions

function summe(zahlen) {
    return zahlen.reduce((acc, zahl) => acc + zahl, 0);
}

function durchschnitt(zahlen) {
    return summe(zahlen) / zahlen.length;
}

function maximum(zahlen) {
    return Math.max(...zahlen);
}

function minimum(zahlen) {
    return Math.min(...zahlen);
}

const zahlen = [10, 20, 30, 40, 50];

console.log(summe(zahlen));        // 150
console.log(durchschnitt(zahlen)); // 30
console.log(maximum(zahlen));      // 50
console.log(minimum(zahlen));      // 10

Beispiel 5: Formatierung

Format Functions

function formatPreis(preis) {
    return preis.toFixed(2) + ' €';
}

function formatDatum(datum) {
    const tag = String(datum.getDate()).padStart(2, '0');
    const monat = String(datum.getMonth() + 1).padStart(2, '0');
    const jahr = datum.getFullYear();
    return `${tag}.${monat}.${jahr}`;
}

function formatTelefon(nummer) {
    // 01234567890 -> 0123 456 7890
    return nummer.replace(/(\d{4})(\d{3})(\d{4})/, '$1 $2 $3');
}

console.log(formatPreis(19.5));           // 19.50 €
console.log(formatDatum(new Date()));     // 15.01.2025
console.log(formatTelefon('01234567890'));// 0123 456 7890

Best Practices

✅ DO:

Eine Aufgabe pro Function
Aussagekräftige Namen (Verb + Nomen)
Kurz halten (max 20 Zeilen)
return nutzen statt nur console.log
Arrow Functions für kurze Callbacks
Default Parameters für optionale Werte

Good Practices

// ✅ Klarer Name, eine Aufgabe
function berechneRabatt(preis, prozent) {
    return preis * (prozent / 100);
}

// ✅ Arrow Function für Callback
const zahlen = [1, 2, 3];
const verdoppelt = zahlen.map(x => x * 2);

// ✅ Default Parameter
function grüßen(name = 'Gast') {
    return `Hallo ${name}`;
}

// ✅ Früh return
function istGültig(wert) {
    if (!wert) return false;
    if (wert < 0) return false;
    return true;
}

❌ DON'T:

Nicht zu viele Parameter (max 3-4)
Nicht zu lang (Zeichen pro Zeile)
Nicht globale Variables ändern
Nicht zu viel verschachteln

Anti-Patterns

// ❌ SCHLECHT: Zu viele Parameter
function erstellen(name, alter, stadt, straße, plz, land, email, telefon) {
    // Zu viele!
}

// ✅ BESSER: Object Parameter
function erstellen(daten) {
    const { name, alter, stadt, email } = daten;
    // ...
}

// ❌ SCHLECHT: Globale Variable ändern
let count = 0;
function erhöhen() {
    count++;  // Ändert globale Variable!
}

// ✅ BESSER: return nutzen
function erhöhen(wert) {
    return wert + 1;
}

// ❌ SCHLECHT: Zu verschachtelt
function test() {
    if (a) {
        if (b) {
            if (c) {
                // Zu tief!
            }
        }
    }
}

Pure Functions

Functions ohne Seiteneffekte:

Pure Functions

// ❌ Impure: Ändert externe Variable
let count = 0;
function erhöhen() {
    count++;
    return count;
}

// ✅ Pure: Keine Seiteneffekte
function erhöhen(wert) {
    return wert + 1;
}

// ❌ Impure: Ändert Input
function verdoppelnArray(arr) {
    for (let i = 0; i < arr.length; i++) {
        arr[i] *= 2;
    }
    return arr;
}

// ✅ Pure: Gibt neues Array zurück
function verdoppelnArray(arr) {
    return arr.map(x => x * 2);
}

TipsAndTricks

⚡

Tipps & Tricks

Arrow Functions für kürzeren Code

Nutze Arrow Functions für compacte Syntax:

// Klassische Function
function double(x) {
    return x * 2;
}

// Arrow Function
const double = (x) => x * 2;

// Bei einem Parameter: Klammern optional
const double = x => x * 2;

// Für Callbacks perfekt
[1, 2, 3].map(x => x * 2);  // [2, 4, 6]

Default Parameters für Fallback-Werte

Setze Standard-Werte direkt in der Signatur:

// ❌ Alt: Manuell prüfen
function greet(name) {
    name = name || 'Gast';
    return `Hallo ${name}`;
}

// ✅ Neu: Default Parameters
function greet(name = 'Gast') {
    return `Hallo ${name}`;
}

// Auch mit Expressions
function createUser(name, id = Date.now()) {
    return { name, id };
}

Rest Parameters für flexible Arguments

Akzeptiere beliebig viele Argumente:

// Summiere alle Zahlen
function sum(...numbers) {
    return numbers.reduce((total, n) => total + n, 0);
}

sum(1, 2, 3);        // 6
sum(1, 2, 3, 4, 5);  // 15

// Mit normalen Parameters kombinieren
function greet(greeting, ...names) {
    return `${greeting}, ${names.join(' und ')}!`;
}
greet('Hallo', 'Max', 'Anna', 'Tom');  // Hallo, Max und Anna und Tom!

Object Destructuring in Parameters

Extrahiere Properties elegant:

// ❌ Umständlich
function createUser(config) {
    const name = config.name;
    const age = config.age;
    const city = config.city;
}

// ✅ Mit Destructuring
function createUser({ name, age, city = 'Berlin' }) {
    console.log(name, age, city);
}

createUser({ name: 'Max', age: 25 });  // Max 25 Berlin

📝 Quiz

Was ist der Unterschied zwischen Parameters und Arguments?

Kein UnterschiedParameters sind in der Definition, Arguments beim AufrufArguments sind veraltetParameters sind schneller

📝 Quiz

Was passiert bei return in einer Function?

Function pausiertFunction gibt Wert zurück und endet sofortFunction startet neuNur Wert zurückgeben

Übungsaufgaben

Teste dein Function-Wissen mit diesen Challenges!

🎯

Aufgabe 1: Erstelle eine Grüß-Funktion

Einfach

Schreibe eine Funktion greet() die einen Namen als Parameter nimmt und 'Hallo [Name]!' in einem <p> Tag ausgibt.

HTML

<button onclick="greet('Max')">Grüße Max</button>
<button onclick="greet('Anna')">Grüße Anna</button>
<p id="output"></p>

<script>
  function greet(name) {
    // Dein Code hier: Gib 'Hallo [name]!' aus

  }
</script>

<button onclick="greet('Max')">Grüße Max</button>
<button onclick="greet('Anna')">Grüße Anna</button>
<p id="output"></p>

<script>
  function greet(name) {
    // Dein Code hier: Gib 'Hallo [name]!' aus

  }
</script>

Live-Vorschau

🎯

Aufgabe 2: Function mit Return

Einfach

Erstelle eine Function multiply() die zwei Zahlen multipliziert und das Ergebnis zurückgibt (return). Zeige das Ergebnis an.

HTML

<button onclick="calculate()">Berechne 5 × 3</button>
<p id="result"></p>

<script>
  function multiply(a, b) {
    // Dein Code: Multipliziere a * b und gib zurück

  }

  function calculate() {
    const ergebnis = multiply(5, 3);
    document.getElementById('result').textContent = 'Ergebnis: ' + ergebnis;
  }
</script>

<button onclick="calculate()">Berechne 5 × 3</button>
<p id="result"></p>

<script>
  function multiply(a, b) {
    // Dein Code: Multipliziere a * b und gib zurück

  }

  function calculate() {
    const ergebnis = multiply(5, 3);
    document.getElementById('result').textContent = 'Ergebnis: ' + ergebnis;
  }
</script>

Live-Vorschau

🎯

Aufgabe 3: Arrow Function

Mittel

Konvertiere die normale Function isEven() in eine Arrow Function. Sie soll true zurückgeben wenn eine Zahl gerade ist.

HTML

<button onclick="test()">Test</button>
<p id="output"></p>

<script>
  // Konvertiere zu Arrow Function
  function isEven(num) {
    return num % 2 === 0;
  }

  function test() {
    const result =
      'isEven(4) = ' + isEven(4) + '\n' +
      'isEven(7) = ' + isEven(7);
    document.getElementById('output').textContent = result;
  }
</script>

<button onclick="test()">Test</button>
<p id="output"></p>

<script>
  // Konvertiere zu Arrow Function
  function isEven(num) {
    return num % 2 === 0;
  }

  function test() {
    const result =
      'isEven(4) = ' + isEven(4) + '\n' +
      'isEven(7) = ' + isEven(7);
    document.getElementById('output').textContent = result;
  }
</script>

Live-Vorschau

🎯

Aufgabe 4: Rechner mit Functions

Schwer

Erstelle 4 Functions (add, subtract, multiply, divide) die jeweils zwei Zahlen nehmen und das Ergebnis zurückgeben.

HTML

<input id="num1" type="number" value="10" style="width:60px">
<input id="num2" type="number" value="5" style="width:60px">
<div>
  <button onclick="calc('add')">+</button>
  <button onclick="calc('subtract')">-</button>
  <button onclick="calc('multiply')">×</button>
  <button onclick="calc('divide')">÷</button>
</div>
<p id="result"></p>

<script>
  function add(a, b) { /* Dein Code */ }
  function subtract(a, b) { /* Dein Code */ }
  function multiply(a, b) { /* Dein Code */ }
  function divide(a, b) { /* Dein Code */ }

  function calc(operation) {
    const a = Number(document.getElementById('num1').value);
    const b = Number(document.getElementById('num2').value);
    let result;

    if (operation === 'add') result = add(a, b);
    else if (operation === 'subtract') result = subtract(a, b);
    else if (operation === 'multiply') result = multiply(a, b);
    else if (operation === 'divide') result = divide(a, b);

    document.getElementById('result').textContent = 'Ergebnis: ' + result;
  }
</script>

<input id="num1" type="number" value="10" style="width:60px">
<input id="num2" type="number" value="5" style="width:60px">
<div>
  <button onclick="calc('add')">+</button>
  <button onclick="calc('subtract')">-</button>
  <button onclick="calc('multiply')">×</button>
  <button onclick="calc('divide')">÷</button>
</div>
<p id="result"></p>

<script>
  function add(a, b) { /* Dein Code */ }
  function subtract(a, b) { /* Dein Code */ }
  function multiply(a, b) { /* Dein Code */ }
  function divide(a, b) { /* Dein Code */ }

  function calc(operation) {
    const a = Number(document.getElementById('num1').value);
    const b = Number(document.getElementById('num2').value);
    let result;

    if (operation === 'add') result = add(a, b);
    else if (operation === 'subtract') result = subtract(a, b);
    else if (operation === 'multiply') result = multiply(a, b);
    else if (operation === 'divide') result = divide(a, b);

    document.getElementById('result').textContent = 'Ergebnis: ' + result;
  }
</script>

Live-Vorschau

Nächste Schritte

Du kennst jetzt:

✅ Function Declaration & Expression
✅ Arrow Functions
✅ Parameters & Return
✅ Scope & Closures
✅ Callbacks & Higher-Order Functions
✅ Rest Parameters & Default Values
✅ Pure Functions
✅ Best Practices

Als Nächstes lernst du:

Arrays im Detail (Methods, Manipulation)
Array Higher-Order Functions (map, filter, reduce)
Spread & Destructuring
Array Best Practices

Weiter so! 🚀

JavaScript Functions - Funktionen erklärt

JavaScript Functions

Was sind Functions?

Function Declaration - Klassische Funktion

Parameters - Werte übergeben

Mehrere Parameter

Default Parameters

return - Werte zurückgeben

Arrow Functions - Moderne Syntax

Function Declaration vs. Arrow Function

Function Expression

Scope - Gültigkeitsbereich

Function Scope

Block vs. Function Scope

Global vs. Local Scope

Closures - Funktionen merken sich Scope

Callback Functions

Higher-Order Functions

IIFE - Immediately Invoked Function Expression

Rest Parameters

Praktische Beispiele

Beispiel 1: Rechner

Beispiel 2: Validierung

Beispiel 3: String Utilities

Beispiel 4: Array Utilities

Beispiel 5: Formatierung

Best Practices

✅ DO:

❌ DON'T:

Pure Functions

TipsAndTricks

Tipps & Tricks

Arrow Functions für kürzeren Code

Default Parameters für Fallback-Werte

Rest Parameters für flexible Arguments

Object Destructuring in Parameters

📝 Quiz

📝 Quiz

Übungsaufgaben

Aufgabe 1: Erstelle eine Grüß-Funktion

Aufgabe 2: Function mit Return

Aufgabe 3: Arrow Function

Aufgabe 4: Rechner mit Functions

Nächste Schritte

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

JavaScript Variables - let, const, var

JavaScript Grundlagen: Deine erste Programmierung

JavaScript Arrays - Listen & Array Methods