Arrow-Funktionen, Gültigkeitsbereich und Template Literals

Meistere die Arrow-Syntax, den Blockgültigkeitsbereich und Closures und baue dann dynamische Zeichenketten mit Template Literals.

8 Min. · 3 Fragen

Arrow-Funktionen sind überall im modernen Code: map- und filter-Callbacks, Event-Listener, Promises. Ihre Stärke: eine kompakte Syntax mit einem impliziten Return, wenn der Rumpf in einen einzigen Ausdruck passt. Sobald du geschweifte Klammern öffnest, wird das return wieder Pflicht.

const double = (n) => n * 2;

const isAdult = (user) => user.age >= 18;

const buildUser = (name) => ({ name, active: true });

const sum = (a, b) => {
  const total = a + b;
  return total;
};

console.log(double(21)); // 42
console.log(buildUser("Ana").active); // true

Der Gültigkeitsbereich (Scope) bestimmt, wo eine Variable sichtbar ist. Mit let und const existiert eine innerhalb eines Blocks (if, for, geschweifte Klammern) deklarierte Variable nur innerhalb dieses Blocks. Ein weiterer wesentlicher Mechanismus: Eine Funktion behält Zugriff auf die Variablen des Bereichs, in dem sie erstellt wurde, sogar nachdem dieser Bereich beendet ist. Das ist eine Closure, und sie ist es, die Zähler, Caches und State-Manager funktionieren lässt.

function createCounter() {
  let count = 0;
  return () => {
    count += 1;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Template Literals, begrenzt durch Backticks, sind eine deutlich bessere Alternative zur Verkettung. Du fügst einen Ausdruck mit ${...} ein, und Zeilenumbrüche bleiben unverändert erhalten, was ideal ist, um Nachrichten oder HTML-Fragmente zu bauen.

const user = { firstName: "Nadia", cartCount: 3 };

const message = `Hello ${user.firstName}, you
have ${user.cartCount} items in your cart.`;

console.log(message);

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Welche Syntax gibt aus einer Arrow-Funktion mit implizitem Return korrekt ein Objekt zurück?
   • (name) => { name: name }
   • (name) => ({ name })
   • (name) => return { name }
2. Ist eine mit let innerhalb eines if-Blocks deklarierte Variable nach diesem Block zugänglich?
   • Ja, genau wie mit var
   • Nein, ihr Gültigkeitsbereich ist auf den Block beschränkt
   • Nur wenn sie initialisiert wurde
3. Welches Zeichen begrenzt ein Template Literal?
   • Das einfache Anführungszeichen
   • Das doppelte Anführungszeichen
   • Der Backtick