Letzte Änderungen

Details

JavaScript ist die Sprache des Webs. Sie läuft in jedem Browser, seit 2009 mit Node.js auch auf dem Server, in Desktop-Anwendungen und in der Industrieautomatisierung. Wer heute Automatisierung, Web-Frontends oder kleine Werkzeuge bauen will, kommt an ihr kaum vorbei.

Variablen und Datentypen

Modernes JavaScript kennt let und const. Die alte var hat Tücken beim Gültigkeitsbereich (Hoisting, Funktion-Scope) und gehört in neuen Projekten nicht mehr verwendet.

const name = "Lübeck";      // unveränderliche Bindung
let counter = 0;            // veränderlich
counter += 1;

// Typen sind dynamisch
typeof name      // "string"
typeof counter   // "number"
typeof undefined // "undefined"
typeof null      // "object"  (alte Eigenheit der Sprache)
typeof []        // "object"

Wichtig: Zeichenketten mit Backticks sind Template Literals und erlauben Interpolation.

const gruss = `Hallo ${name}, Zähler: ${counter}`;

Funktionen

Neben klassischen Funktionen gibt es Arrow Functions mit kürzerer Syntax und anderem this-Verhalten.

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

const add2 = (a, b) => a + b;

// Standardwerte und Rest-Parameter
const begruessen = (wer = "Welt", ...extra) => `Hallo ${wer}${extra.length ? "!" : ""}`;

Arrays und Objekte

const zahlen = [4, 8, 15, 16, 23, 42];

zahlen.map(n => n * 2);          // [8, 16, 30, 32, 46, 84]
zahlen.filter(n => n % 2 === 0); // [4, 8, 16, 42]
zahlen.reduce((s, n) => s + n, 0); // 108

const server = { host: "example.de", port: 443, tls: true };
const { host, port } = server;   // Destrukturierung

Diese drei Methoden – map, filter, reduce – lösen die meisten Schleifenaufgaben eleganter als for und sind der Kern modernen JavaScript-Stils.

Das DOM: HTML aus JavaScript steuern

const el = document.querySelector("#status");
el.textContent = "Verbunden";
el.classList.add("ok");

document.querySelector("#btn").addEventListener("click", async () => {
  const antwort = await fetch("/api/status");
  const daten = await antwort.json();
  el.textContent = daten.status;
});

fetch liefert ein Promise. Mit async/await schreibt man asynchronen Code fast so lesbar wie synchronen – ohne die berüchtigte Callback-Verschachtelung.

Asynchrones Arbeiten

async function holeAlle(ids) {
  const ergebnisse = await Promise.all(ids.map(id => fetch(`/api/${id}`)));
  return Promise.all(ergebnisse.map(r => r.json()));
}

try {
  const daten = await holeAlle([1, 2, 3]);
  console.log(daten.length);
} catch (err) {
  console.error("Abruf fehlgeschlagen:", err.message);
}

Module und Node.js

Code wird über import/export in Module geteilt – im Browser mit type="module", in Node.js mit .mjs oder "type": "module" in der package.json.

// lib/math.js
export const quadrat = x => x * x;

// app.js
import { quadrat } from "./lib/math.js";

Was man früh verinnerlichen sollte

  • Immer const versuchen, let nur bei Bedarf.
  • Strikte Vergleiche === statt == (kein Typzwang).
  • async/await statt verschachtelter Callbacks.
  • Fehler immer behandeln – ein unbehandeltes Promise scheitert still.
  • Fakten und Fallstricke der Sprache: MDN ist die verlässlichste Referenz.

Siehe auch