Modernes JavaScript für das Frontend

Worum es geht

Die Linguaplus Sprachschulen AG in St. Gallen bietet an vier Standorten über 300 Sprachkurse an. Der Katalog ist heute ein PDF. Wer einen Englischkurs am Dienstagabend in Wil sucht, scrollt durch 40 Seiten und schreibt danach eine E-Mail, um zu fragen, ob noch Plätze frei sind. Lorena, Informatikerin Applikationsentwicklung im 2. Lehrjahr, soll das ändern: Das Backend-Team hat eine REST-API gebaut, und Lorena entwickelt das Frontend dazu. Einen Katalog im Browser, der während des Tippens filtert, freie Plätze live anzeigt und Anmeldungen direkt entgegennimmt.

Genau diesen Weg gehst du in diesem Kurs mit. Bevor du Klicks abfängst oder Daten von einer API lädst, brauchst du ein solides Werkzeug: modernes JavaScript. Frontend-Code besteht zu einem grossen Teil daraus, Daten umzuformen: Kurse filtern, sortieren, in Anzeigetexte verwandeln, zusammenzählen. Wer das sicher beherrscht, schreibt später in React kurze, lesbare Komponenten.

In dieser Lektion frischst du die Sprachmittel auf, die du im Frontend täglich brauchst, und wendest sie direkt auf echte Kursdaten an.

Wo JavaScript läuft und wie du es ausprobierst

JavaScript läuft im Browser jeder Besucherin und jedes Besuchers. Du bindest ein Skript in der HTML-Seite ein, am besten als Modul:

<script type="module" src="app.js"></script>

type="module" hat zwei Vorteile: Das Skript wird erst ausgeführt, wenn die Seite fertig eingelesen ist, und du kannst Code mit import und export auf mehrere Dateien verteilen.

Zum Ausprobieren öffnest du die DevTools mit F12 und tippst im Tab Console zum Beispiel 2 + 3. Für längere Experimente nutzt du Node.js im Terminal (node test.js). Die Code-Labore dieses Kurses laufen direkt im Browser.

Variablen, Funktionen und Objekte modern geschrieben

Viele Tutorials im Netz verwenden noch Schreibweisen von vor 2015. Die folgende Tabelle zeigt, was du heute schreibst:

Faustregel: standardmässig const, let nur für Werte, die sich wirklich ändern (etwa ein Zähler), var nie mehr.

Ein Kurs aus der Linguaplus-API sieht so aus:

const kurs = {
  id: 41,
  titel: "Englisch B1 Abendkurs",
  sprache: "Englisch",
  niveau: "B1",
  standort: "St. Gallen",
  wochentag: "Di",
  startDatum: "2026-10-20",
  preisRappen: 48000,
  plaetzeFrei: 3,
};

const { titel, standort, plaetzeFrei } = kurs;               // Destructuring
console.log(`${titel} (${standort}): ${plaetzeFrei} Plätze`); // Englisch B1 Abendkurs (St. Gallen): 3 Plätze

const ausgebucht = { ...kurs, plaetzeFrei: 0 };              // neue Kopie, Original bleibt
console.log(kurs.plaetzeFrei, ausgebucht.plaetzeFrei);       // 3 0

Beachte zwei Details. Erstens: Der Preis steht in Rappen als ganze Zahl. Mit Franken als Kommazahl rechnet JavaScript ungenau (0.1 + 0.2 ergibt 0.30000000000000004), mit ganzen Rappen nicht. Zweitens: const schützt nur die Variable, nicht den Inhalt. kurs.plaetzeFrei = 2 funktioniert trotz const. Darum ist die Kopie mit Spread so wichtig: Sie wird in React zur Grundregel.

const kurs = { titel: "Englisch B1", plaetzeFrei: 3 };
kurs.plaetzeFrei = 2;
const kopie = { ...kurs, plaetzeFrei: 0 };
console.log(kurs.plaetzeFrei, kopie.plaetzeFrei);

Arrays verarbeiten: filter, map, sort, reduce

Im Frontend hast du fast immer eine Liste: Kurse, Termine, Bestellungen. Statt mit for-Schleifen und Hilfsvariablen zu arbeiten, beschreibst du mit Array-Methoden, was passieren soll:

Ein Fallstrick verdient besondere Aufmerksamkeit: Das klassische sort() sortiert das Original-Array um und gibt es zurück. Wenn dieselbe Liste an anderer Stelle noch gebraucht wird, verändert sich dort plötzlich die Reihenfolge. Nimm deshalb toSorted() (in allen aktuellen Browsern verfügbar) oder kopiere vorher: [...kurse].sort(...).

Ausserdem sortiert sort() ohne Vergleichsfunktion als Text: [100, 25, 3].sort() ergibt [100, 25, 3], weil «1» vor «2» vor «3» kommt. Für Zahlen brauchst du (a, b) => a - b, für Texte (a, b) => a.localeCompare(b).

reduce wirkt am Anfang am fremdesten. Stell es dir wie eine Kasse vor: Der Startwert ist die leere Kasse, und für jedes Element legst du etwas dazu.

const freiTotal = kurse.reduce((summe, k) => summe + k.plaetzeFrei, 0);

const proSprache = kurse.reduce((zaehler, k) => {
  zaehler[k.sprache] = (zaehler[k.sprache] ?? 0) + 1;
  return zaehler;                     // immer den Zwischenstand zurückgeben
}, {});
// { Englisch: 4, Italienisch: 1, Französisch: 1 }

Code auf Dateien verteilen: Module

Sobald dein Projekt wächst, verteilst du Funktionen auf mehrere Dateien. Was eine Datei anbietet, markierst du mit export, und die andere Datei holt es mit import:

// format.js
export function formatChf(rappen) {
  return `CHF ${(rappen / 100).toFixed(2)}`;
}

export function formatDatum(iso) {
  const [jahr, monat, tag] = iso.split("-");   // "2026-10-20" -> ["2026", "10", "20"]
  return `${tag}.${monat}.${jahr}`;
}

// app.js
import { formatChf, formatDatum } from "./format.js";
console.log(formatChf(48000), formatDatum("2026-10-20"));  // CHF 480.00 20.10.2026

Jede React-Komponente, die du später schreibst, ist genau so ein Modul.

Für Beträge ab 1000 Franken mit Tausendertrennzeichen (CHF 1’280.00) gibt es new Intl.NumberFormat("de-CH", { style: "currency", currency: "CHF" }). Die Labore verwenden die einfache Variante mit toFixed(2).

Schritt für Schritt: Aus Kursdaten eine Anzeige machen

Lorenas erster Auftrag: Die Marketingabteilung möchte für den Newsletter eine Liste aller Englischkurse mit freien Plätzen, sortiert nach Startdatum, im Format 20.10.2026 | Englisch B1 Abendkurs | St. Gallen | CHF 480.00. Dazu die Gesamtzahl freier Plätze in allen Englischkursen.

Schritt 1: Die Daten. Sechs Kurse aus der API, hier direkt als Array:

const kurse = [
  { id: 41, titel: "Englisch B1 Abendkurs", sprache: "Englisch", niveau: "B1", standort: "St. Gallen", startDatum: "2026-10-20", preisRappen: 48000, plaetzeFrei: 3 },
  { id: 42, titel: "Italienisch A1 für Einsteiger", sprache: "Italienisch", niveau: "A1", standort: "Wil", startDatum: "2026-10-19", preisRappen: 39000, plaetzeFrei: 0 },
  { id: 43, titel: "Englisch B2 Business", sprache: "Englisch", niveau: "B2", standort: "St. Gallen", startDatum: "2026-11-05", preisRappen: 62000, plaetzeFrei: 5 },
  { id: 44, titel: "Französisch A2 Konversation", sprache: "Französisch", niveau: "A2", standort: "Frauenfeld", startDatum: "2026-10-21", preisRappen: 42000, plaetzeFrei: 2 },
  { id: 45, titel: "Englisch A2 Auffrischung", sprache: "Englisch", niveau: "A2", standort: "Herisau", startDatum: "2026-10-12", preisRappen: 36000, plaetzeFrei: 0 },
  { id: 46, titel: "Englisch C1 Cambridge-Vorbereitung", sprache: "Englisch", niveau: "C1", standort: "St. Gallen", startDatum: "2026-10-31", preisRappen: 89000, plaetzeFrei: 1 },
];

Schritt 2: Filtern. Behalten werden Kurse, deren Sprache «Englisch» ist und die mindestens einen freien Platz haben. Kurs 45 (0 Plätze) und die Kurse in anderen Sprachen fallen weg. Zwischenergebnis: Kurse 41, 43, 46.

const offen = kurse.filter((k) => k.sprache === "Englisch" && k.plaetzeFrei > 0);

Schritt 3: Sortieren. ISO-Daten wie 2026-10-20 lassen sich als Text sortieren, weil Jahr, Monat und Tag von gross nach klein angeordnet sind. Zwischenergebnis: 41 (20.10.), 46 (31.10.), 43 (05.11.).

const sortiert = offen.toSorted((a, b) => a.startDatum.localeCompare(b.startDatum));

Schritt 4: In Anzeigetexte umwandeln. Mit map wird aus jedem Kursobjekt eine Zeile. Die Formatierung erledigen die beiden Funktionen aus dem Modul oben.

const zeilen = sortiert.map(
  (k) => `${formatDatum(k.startDatum)} | ${k.titel} | ${k.standort} | ${formatChf(k.preisRappen)}`
);

Schritt 5: Zusammenzählen. Die Gesamtzahl freier Plätze berechnest du über alle Englischkurse, auch den ausgebuchten: 3 + 5 + 0 + 1 = 9.

const freiEnglisch = kurse
  .filter((k) => k.sprache === "Englisch")
  .reduce((summe, k) => summe + k.plaetzeFrei, 0);

Schritt 6: Ausgeben und prüfen.

console.log(zeilen.join("\n"));
console.log(`Freie Plätze Englisch total: ${freiEnglisch}`);
console.log(kurse[0].id);   // 41: Das Original ist unverändert, toSorted hat eine Kopie sortiert

20.10.2026 | Englisch B1 Abendkurs | St. Gallen | CHF 480.00
31.10.2026 | Englisch C1 Cambridge-Vorbereitung | St. Gallen | CHF 890.00
05.11.2026 | Englisch B2 Business | St. Gallen | CHF 620.00
Freie Plätze Englisch total: 9
41

Kein let, keine Schleife mit Index, jede Zeile mit einer erkennbaren Aufgabe: In diesem Stil schreibst du später auch deine React-Komponenten.

Typische Fehler

1. sort() verändert das Original. Plötzlich ist die Liste an einer ganz anderen Stelle der App umsortiert. Korrektur: toSorted() oder [...liste].sort().
2. Zahlen ohne Vergleichsfunktion sortieren. [100, 25, 3].sort() bleibt [100, 25, 3]. Korrektur: .toSorted((a, b) => a - b).
3. Geschweifte Klammern ohne return. kurse.map((k) => { k.titel }) liefert lauter undefined. Mit Klammern brauchst du return, ohne Klammern ((k) => k.titel) wird automatisch zurückgegeben. Willst du ein Objekt direkt zurückgeben, setzt du runde Klammern darum: (k) => ({ id: k.id }).
4. == statt ===. "0" == 0 ist true, "0" === 0 ist false. Nimm immer ===, dann gibt es keine überraschenden Typumwandlungen.
5. Franken als Kommazahl. 0.1 + 0.2 ist nicht 0.3. Rechne mit ganzen Rappen und formatiere erst bei der Anzeige.

Zusammenfassung

• Standardmässig const, nur bei echten Änderungen let, nie var.
• Template-Strings, Destructuring, Spread, ?. und ?? machen Frontend-Code kurz und lesbar.
• filter, map, toSorted und reduce liefern neue Werte und lassen das Original unverändert. Das ist die Grundlage für React.
• sort() verändert das Original und sortiert ohne Vergleichsfunktion als Text.
• Geldbeträge in Rappen speichern, erst bei der Anzeige in CHF 480.00 umwandeln.
• Mit export und import verteilst du Code auf Module, so wie später jede Komponente eine eigene Datei bekommt.
• Der Debugger in den DevTools zeigt dir alle Werte an einer Stelle, ohne dass du raten musst.