Syntax & Konzepte auf einen Blick
ES2024const x = 42;
Unveränderlich
let y = "Hallo";
Block-scoped, änderbar
typeof x
Typ ermitteln
number | string | boolean
Primitive Typen
null | undefined | symbol
Weitere Primitive
x ?? "default"
Nullish Coalescing
obj?.prop
Optional Chaining
x === y
Strikte Gleichheit
function foo(x) { return x; }
Function Declaration
const foo = (x) => x * 2;
Arrow Function
const foo = (x = 0) => x;
Default-Parameter
const foo = (...args) => args;
Rest-Parameter
foo(...arr)
Spread beim Aufruf
const fn = fn(fn(x))
Funktionskomposition
(x) => { return { x }; }
Objekt zurückgeben
const arr = [1, 2, 3];
Array erstellen
arr.push(4); arr.pop()
Ende hinzufügen / entfernen
arr.unshift(0); arr.shift()
Anfang hinzufügen / entfernen
arr.map(x => x * 2)
Transformieren
arr.filter(x => x > 1)
Filtern
arr.reduce((acc, x) => acc + x, 0)
Reduzieren
arr.find(x => x > 2)
Erstes gefundenes Element
arr.includes(2)
Enthält Wert?
arr.flat(); arr.flatMap(fn)
Verschachteln auflösen
[...arr1, ...arr2]
Arrays zusammenführen
arr.slice(1, 3)
Ausschneiden (nicht mutierend)
const obj = { a: 1, b: 2 };
Objekt-Literal
obj.a / obj["a"]
Zugriff (dot / bracket)
{ ...obj, c: 3 }
Spread / klonen + erweitern
Object.keys(obj)
Schlüssel-Array
Object.values(obj)
Werte-Array
Object.entries(obj)
[key, value]-Paare
Object.assign({}, obj)
Flaches Klonen
structuredClone(obj)
Tiefes Klonen
"a" in obj
Schlüssel vorhanden?
`Hallo ${name}`
Template Literal
s.length
Länge
s.toUpperCase() / toLowerCase()
Groß-/Kleinschreibung
s.trim() / trimStart() / trimEnd()
Leerzeichen entfernen
s.includes("abc")
Enthält Teilstring?
s.startsWith("a") / endsWith()
Anfang/Ende prüfen
s.split(",")
In Array aufteilen
s.replace("a", "b")
Ersetzen (erstes)
s.replaceAll("a", "b")
Alle ersetzen
s.slice(0, 3)
Teilstring
s.padStart(5, "0")
Auffüllen links
const { a, b } = obj;
Objekt destructuring
const { a: alias } = obj;
Mit Umbenennung
const { a = 0 } = obj;
Mit Standardwert
const [x, y] = arr;
Array destructuring
const [x, , z] = arr;
Element überspringen
const [head, ...rest] = arr;
Rest-Element
const { a, ...rest } = obj;
Objekt-Rest
document.querySelector("#id")
Element suchen (1)
document.querySelectorAll(".cls")
Alle Elemente suchen
el.textContent = "text"
Text setzen
el.innerHTML = "<b>html</b>"
HTML setzen
el.classList.add("active")
Klasse hinzufügen
el.classList.toggle("open")
Klasse umschalten
el.setAttribute("href", "#")
Attribut setzen
el.style.color = "red"
Inline-Style setzen
document.createElement("div")
Element erstellen
parent.appendChild(el)
Element einfügen
el.remove()
Element entfernen
el.addEventListener("click", fn)
Event-Listener
el.removeEventListener("click", fn)
Listener entfernen
e.preventDefault()
Standard verhindern
e.stopPropagation()
Bubbling stoppen
e.target / e.currentTarget
Event-Ziel
"click" | "input" | "submit" | "keydown"
Häufige Event-Typen
"DOMContentLoaded" | "load" | "resize"
Dokument-Events
const p = new Promise((res, rej) => …)
Promise erstellen
p.then(fn).catch(fn).finally(fn)
Promise-Kette
async function foo() { … }
Async-Funktion
const data = await fetch("url")
Await (nur in async)
const json = await res.json()
Fetch → JSON parsen
try { await … } catch(e) { … }
Async Fehlerbehandlung
Promise.all([p1, p2])
Alle parallel warten
Promise.allSettled([p1, p2])
Alle, auch bei Fehler
Promise.race([p1, p2])
Erster gewinnt
class Foo { constructor(x) { this.x = x; } }
Klasse definieren
class Bar extends Foo { … }
Vererbung
super(x)
Eltern-Konstruktor aufrufen
#private = 0;
Private Feld
static count = 0;
Statisches Feld
get val() { return this.#x; }
Getter
set val(v) { this.#x = v; }
Setter
obj instanceof Foo
Typ-Prüfung