JavaScript-Spickzettel

Alle Werkzeuge
Kostenlos

Eine durchsuchbare, druckbare Referenz für modernes JavaScript — Syntax, Arrays, Strings, Objekte, async/await, DOM und ES2022+-Funktionen. Kostenlos.

Variables & types

10
let x = 1;
Block-scoped, reassignable variable
const PI = 3.14;
Block-scoped constant binding
typeof value
Returns the type as a string
Number('42')
Convert a string to a number
String(42)
Convert a value to a string
parseInt('42px', 10)
Parse a leading integer (base 10)
Boolean(0)
Coerce a value to true/false
value ?? 'default'
Nullish coalescing (null/undefined only)
a?.b?.c
Optional chaining, short-circuits on null
Array.isArray(x)
Check whether a value is an array

Functions

9
function add(a, b) { return a + b; }
Named function declaration
const add = (a, b) => a + b;
Arrow function with implicit return
const f = (a = 1) => a;
Default parameter value
function f(...args) {}
Rest parameters collect into an array
f(...arr)
Spread an array into arguments
const { a, b } = obj;
Object destructuring
const [x, y] = arr;
Array destructuring
(function(){})()
Immediately-invoked function (IIFE)
fn.bind(this)
Bind a fixed this context

Strings

10
`Hello ${name}`
Template literal interpolation
str.length
Number of characters
str.includes('a')
Check if a substring exists
str.slice(0, 3)
Extract part of a string
str.replace(/a/g, 'b')
Replace matches (regex)
str.split(',')
Split into an array
str.trim()
Remove surrounding whitespace
str.toUpperCase()
Convert to upper case
str.padStart(3, '0')
Pad the start to a length
str.at(-1)
Character at index (supports negatives)

Arrays

11
arr.map(x => x * 2)
Transform each element
arr.filter(x => x > 0)
Keep matching elements
arr.reduce((a, b) => a + b, 0)
Reduce to a single value
arr.find(x => x.id === 1)
First matching element
arr.some(x => x > 0)
True if any element matches
arr.every(x => x > 0)
True if all elements match
arr.includes(3)
Check for a value
arr.sort((a, b) => a - b)
Numeric ascending sort
[...new Set(arr)]
Remove duplicate values
arr.flat(Infinity)
Fully flatten nested arrays
arr.at(-1)
Last element (negative index)

Objects

9
Object.keys(obj)
Array of own enumerable keys
Object.values(obj)
Array of own values
Object.entries(obj)
Array of [key, value] pairs
{ ...a, ...b }
Merge objects (spread)
Object.assign({}, a, b)
Copy/merge into a target
Object.freeze(obj)
Make an object immutable
{ [key]: value }
Computed property name
obj.hasOwnProperty('x')
Check for an own property
structuredClone(obj)
Deep clone an object

Async & promises

9
async function f() {}
Declare an async function
await fetch(url)
Pause until a promise resolves
Promise.all([p1, p2])
Wait for all to resolve
Promise.allSettled([p1, p2])
Wait for all to settle
Promise.race([p1, p2])
Resolve with the first to settle
new Promise((res, rej) => {})
Create a promise manually
try { await f(); } catch (e) {}
Handle async errors
setTimeout(fn, 1000)
Run after a delay (ms)
queueMicrotask(fn)
Schedule a microtask

Control flow

9
if (a) {} else if (b) {} else {}
Conditional branches
a ? b : c
Ternary expression
switch (x) { case 1: break; }
Multi-way branch
for (const x of arr) {}
Iterate values (iterables)
for (const k in obj) {}
Iterate object keys
while (cond) {}
Loop while a condition holds
arr.forEach((x, i) => {})
Run a callback per element
break / continue
Exit or skip a loop iteration
label: for (...) { break label; }
Break out of nested loops

DOM & events

10
document.querySelector('.x')
First matching element
document.querySelectorAll('.x')
All matching elements (NodeList)
el.addEventListener('click', fn)
Attach an event listener
el.classList.toggle('active')
Toggle a CSS class
el.dataset.id
Read a data-id attribute
el.textContent = 'hi'
Set text safely (no HTML)
el.setAttribute('aria-hidden', true)
Set an attribute
e.preventDefault()
Cancel the default action
el.closest('.parent')
Nearest matching ancestor
document.createElement('div')
Create a new element

Classes & modules

9
class A extends B {}
Class with inheritance
constructor() { super(); }
Initialize and call the parent
#private = 1;
Private class field
static create() {}
Static method on the class
get value() {}
Getter accessor
export default fn;
Default module export
export { a, b };
Named module exports
import x, { y } from './m.js'
Default + named imports
const m = await import('./m.js')
Dynamic import

Kein Eintrag passt zu „:q“.

Über JavaScript-Spickzettel

Dieses JavaScript-Spickzettel ist eine durchsuchbare Einseiten-Referenz zur modernen Sprache: Variablen und Typen, Funktionen, Strings, Arrays, Objekte, Async und Promises, Kontrollfluss, DOM und Events sowie Klassen und Module. Jeder Eintrag paart ein echtes Code-Snippet mit einer einzeiligen Erklärung, was es tut.

Es ist für das JavaScript geschrieben, das Leute heute tatsächlich ausliefern – let und const, Arrow-Funktionen, Destructuring, Spread, Optional Chaining, Template-Literale, async/await und ES-Module – sodass es auch als schneller Auffrischer dient, wenn Sie von einer anderen Sprache zurückwechseln.

Das gesamte Blatt lädt clientseitig und ist kostenlos. Filtern Sie es live mit dem Suchfeld, springen Sie zwischen Abschnitten über das sticky Inhaltsverzeichnis, klicken Sie auf ein Snippet, um es zu kopieren, und drucken Sie die Seite für eine JavaScript-Referenz am Schreibtisch.

So verwenden Sie JavaScript-Spickzettel

  1. Öffnen Sie das Blatt und überfliegen Sie die Abschnittsliste – von Variablen & Typen über DOM & Events bis Klassen & Module.
  2. Tippen Sie in das Suchfeld, um jede Zeile live zu filtern; der Treffer-Zähler zeigt, wie viele Snippets passen.
  3. Nutzen Sie das sticky Inhaltsverzeichnis, um direkt zu einem Abschnitt wie Async & Promises zu springen.
  4. Klicken Sie auf ein Snippet oder dessen Kopieren-Symbol, um den Code in Ihre Zwischenablage zu kopieren.
  5. Klicken Sie auf Drucken für eine saubere, papierfreundliche Kopie der gesamten Referenz.

Häufig gestellte Fragen

Neun Abschnitte: Variablen und Typen, Funktionen, Strings, Arrays, Objekte, Async und Promises, Kontrollfluss, DOM und Events sowie Klassen und Module – jeweils als kopierfertige Snippets mit kurzen Beschreibungen.

Ja. Die Snippets nutzen aktuelle Syntax – let/const, Arrow-Funktionen, Destructuring, Optional Chaining, async/await, Klassen und ES-Module – und spiegeln ES2022+-JavaScript statt veralteter Muster wider.

Ja. Ein Klick auf ein beliebiges Code-Snippet oder das beim Überfahren einer Zeile erscheinende Kopieren-Symbol legt es sofort mit einer kurzen „Kopiert!“-Bestätigung in Ihre Zwischenablage.

Ja. Die Schaltfläche Drucken erzeugt ein sauberes Layout ohne Suchleiste, Navigation und Schaltflächen, sodass die gedruckten Seiten nur die Snippets und ihre Beschreibungen enthalten.

Ja. Es ist kostenlos, lädt vollständig in Ihrem Browser und erfordert kein Konto.
Teilen
Verwandte Tools
CSS-Spickzettel Eine durchsuchbare, druckbare CSS-Referenz — Selektoren, das Box-Modell, Flexbox, Grid, Typografie, Transitions und moderne Funktionen. Kostenlos. Kostenlos
PHP-Spickzettel Eine durchsuchbare, druckbare PHP-8.3+-Referenz — Syntax, Strings, Arrays, Funktionen, Klassen, Enums, Attribute und moderne Funktionen. Kostenlos. Kostenlos
Python-Spickzettel Eine durchsuchbare, druckbare Python-3-Referenz — Syntax, Datenstrukturen, Comprehensions, Funktionen, Klassen, Dateien und die Standardbibliothek. Kostenlos. Kostenlos
MySQL-Spickzettel Eine durchsuchbare, druckbare MySQL-Referenz — Abfragen, Joins, Indizes, Funktionen, Datentypen und Verwaltungsbefehle. Kostenlos. Kostenlos
Shell-Spickzettel Eine durchsuchbare, druckbare Bash-/Shell-Referenz — Navigation, Dateien, Pipes, Variablen, Schleifen, Bedingungen und praktische Einzeiler. Kostenlos. Kostenlos
SSH-Spickzettel Eine durchsuchbare, druckbare SSH-Referenz — Verbindungen, Schlüssel, Konfiguration, Tunneling, SCP/SFTP und Agent-Weiterleitung. Kostenlos. Kostenlos
Beliebte Suchen
javascript cheat sheet js cheat sheet javascript array methods javascript string methods javascript promises and async await javascript object methods js dom methods javascript syntax reference
Brauchen Sie Hilfe?
Ein Problem mit diesem Tool gefunden? Sagen Sie es unserem Team.
Problem melden

Füge dieses kostenlose Tool zu deiner eigenen Website hinzu — kopiere den Code unten und füge ihn ein.