JavaScript Spickzettel
Zuletzt aktualisiert
Variablen (let, const, var)
Werte deklarieren; bevorzuge const, dann let, und vermeide var.
| Operation | Syntax |
|---|---|
| Block-scoped, neu zuweisbar | let count = 0; |
| Block-scoped, nicht neu zuweisbar | const name = "Ada"; |
| Function-scoped (veraltet) | var x = 1; |
| Ohne Wert deklarieren | let result; |
| Mehrere Deklarationen | let a = 1, b = 2; |
| Konstantes Objekt (veränderbarer Inhalt) | const user = {}; user.id = 1; |
Datentypen
Die primitiven und Referenztypen sowie wie man sie prüft.
| Typ | Beispiel |
|---|---|
| Number | let n = 42; |
| String | let s = "hi"; |
| Boolean | let ok = true; |
| Array | let arr = [1, 2, 3]; |
| Object | let obj = { id: 1 }; |
| Null / undefined | let a = null;, let b; |
| Einen Typ prüfen | typeof n |
| Konvertieren | Number("7"), String(42), Boolean(0) |
Strings & Template Literals
Text erstellen und bearbeiten.
| Operation | Syntax |
|---|---|
| Template Literal | Hi ${name}, age ${age} (in Backticks setzen) |
| Länge | text.length |
| Groß- / Kleinschreibung | text.toUpperCase(), text.toLowerCase() |
| Leerzeichen entfernen | text.trim() |
| Alle ersetzen | text.replaceAll("a", "b") |
| In ein Array aufteilen | text.split(",") |
| Enthält | text.includes("js") |
| Ausschneiden | text.slice(0, 3) |
Arrays & Array-Methoden
Geordnete Sammlungen und die Methoden, die über sie iterieren.
| Operation | Syntax |
|---|---|
| Am Ende hinzufügen / entfernen | arr.push(4), arr.pop() |
| Am Anfang hinzufügen / entfernen | arr.unshift(0), arr.shift() |
| Jedes Element transformieren | arr.map(x => x * 2) |
| Passende Elemente behalten | arr.filter(x => x > 0) |
| Auf einen einzelnen Wert reduzieren | arr.reduce((sum, x) => sum + x, 0) |
| Ein Element finden | arr.find(x => x.id === 1) |
| some / every testen | arr.some(f), arr.every(f) |
| Index eines Werts | arr.indexOf(3), arr.includes(3) |
| Zu einem String zusammenfügen | arr.join(", ") |
Objekte
Schlüssel-Wert-Sammlungen.
| Operation | Syntax |
|---|---|
| Erstellen | const user = { id: 1, name: "Ada" }; |
| Auf eine Eigenschaft zugreifen | user.name, user["name"] |
| Eine Eigenschaft hinzufügen / aktualisieren | user.age = 25; |
| Eine Eigenschaft löschen | delete user.age; |
| Alle Schlüssel / Werte abrufen | Object.keys(user), Object.values(user) |
| Einträge abrufen | Object.entries(user) |
| Objekte zusammenführen | Object.assign({}, a, b) |
| Flache Kopie | const copy = { ...user }; |
Kontrollfluss
Bedingungen und Schleifen.
| Operation | Syntax |
|---|---|
| If / else if / else | if (x > 0) { … } else { … } |
| Ternär | const y = x > 0 ? 1 : 0; |
| Switch | switch (x) { case 1: … break; } |
| For-Schleife | for (let i = 0; i < 5; i++) { … } |
| For-of (Werte) | for (const item of arr) { … } |
| For-in (Schlüssel) | for (const key in obj) { … } |
| While-Schleife | while (x < 10) { … } |
Funktionen & Arrow Functions
Wiederverwendbare, aufrufbare Blöcke definieren.
| Operation | Syntax |
|---|---|
| Funktionsdeklaration | function add(a, b) { return a + b; } |
| Arrow Function | const add = (a, b) => a + b; |
| Arrow mit einem Argument | const sq = x => x * x; |
| Arrow ohne Argumente | const now = () => Date.now(); |
| Standardparameter | function f(x = 0) { … } |
| Rest-Parameter | function f(...args) { … } |
| Sofort aufgerufen (IIFE) | (() => { … })(); |
Destrukturierung & Spread
Werte entpacken und Strukturen kopieren/zusammenführen.
| Operation | Syntax |
|---|---|
| Array-Destrukturierung | const [a, b] = arr; |
| Objekt-Destrukturierung | const { id, name } = user; |
| Beim Entpacken umbenennen | const { id: userId } = user; |
| Standardwert | const { age = 0 } = user; |
| Ein Array spreaden | const all = [...a, ...b]; |
| Ein Objekt spreaden | const next = { ...user, age: 25 }; |
| Rest in der Destrukturierung | const [first, ...rest] = arr; |
Promises & async/await
Asynchrone Arbeit wie Netzwerkanfragen handhaben.
| Operation | Syntax |
|---|---|
| Async-Funktion | async function load() { … } |
| Auf ein Promise warten | const data = await fetch(url); |
| Then / catch | promise.then(res => …).catch(err => …) |
| Try / catch mit await | try { await f(); } catch (e) { … } |
| Resolve / reject | Promise.resolve(1), Promise.reject(err) |
| Auf alle warten | await Promise.all([a, b]) |
| Erstes, das sich erledigt | await Promise.race([a, b]) |
Die moderne JavaScript-Syntax, die du am häufigsten brauchst, auf einer Seite. Dieser JavaScript-Spickzettel ist eine Schnellreferenz für den ES6+-Alltag - Variablen deklarieren, String- und Array-Methoden, Objekte, Arrow Functions, Destrukturierung und async/await.
Alles hier ist Standard-JavaScript, das in modernen Browsern und Node.js läuft. Kopiere, was du brauchst, oder probiere jedes Snippet live im JS-Playground aus - nichts zu installieren.
JavaScript-Spickzettel-FAQ
Ist dieser JavaScript-Spickzettel kostenlos?
Ja. Dieser JavaScript-Spickzettel ist komplett kostenlos, ohne Anmeldung. Setze ein Lesezeichen und komm wieder, wann immer du eine Syntax, eine Array-Methode oder ein Async-Pattern nachschlagen musst.
Was ist der Unterschied zwischen == und === in JavaScript?
== ist lockere Gleichheit: Es konvertiert die Operanden vor dem Vergleich in denselben Typ, sodass 0 == "0" true ergibt. === ist strikte Gleichheit: Es vergleicht sowohl Wert als auch Typ ohne Konvertierung, sodass 0 === "0" false ergibt. Bevorzuge === (und !==) in fast allen Fällen - es ist vorhersehbar und vermeidet überraschende Typumwandlungen.Was ist der Unterschied zwischen let, const und var?
const und let sind block-scoped und wurden in ES6 hinzugefügt; var ist function-scoped und älter. Verwende const für Werte, die du nie neu zuweist, let für Werte, die du neu zuweist, und vermeide var, um Hoisting- und Scope-Bugs zu verhindern. Beachte, dass ein const-Objekt oder -Array seinen Inhalt trotzdem ändern kann - nur die Bindung ist konstant.Kann ich JavaScript online üben?
Ja. Öffne den JS-Playground, um jedes Snippet aus diesem Spickzettel in deinem Browser auszuführen - nichts zu installieren. Wenn du Struktur möchtest, führt dich Coddys kostenloser interaktiver JavaScript-Kurs Schritt für Schritt von Variablen und Schleifen zu Array-Methoden und async/await.
Ist dieser Spickzettel gut für Anfänger?
Ja. Er ist von den Grundlagen (Variablen, Datentypen, Strings) bis hin zu Destrukturierung und async/await gegliedert, sodass du die oberen Abschnitte ab dem ersten Tag nutzen und in moderne ES6+-Features hineinwachsen kannst.
Verwandte Ressourcen
Weitere Spickzettel
