JavaScript Spiekbriefje
Een doorzoekbare, afdrukbare referentie van modern JavaScript — syntaxis, arrays, strings, objecten, async/await, DOM en ES2022+ functies. Gratis.
Variabelen & types
10let x = 1;
Block-scoped, hertoewijsbare variabele
const PI = 3.14;
Block-scoped constante binding
typeof value
Geeft het type als string terug
Number('42')
Zet een string om naar een getal
String(42)
Zet een waarde om naar een string
parseInt('42px', 10)
Lees een voorloop-integer (basis 10)
Boolean(0)
Dwing een waarde naar true/false
value ?? 'default'
Nullish coalescing (alleen null/undefined)
a?.b?.c
Optional chaining, stopt bij null
Array.isArray(x)
Controleer of een waarde een array is
Functies
9function add(a, b) { return a + b; }
Benoemde functiedeclaratie
const add = (a, b) => a + b;
Arrow-functie met impliciete return
const f = (a = 1) => a;
Standaard parameterwaarde
function f(...args) {}
Rest-parameters verzamelen in een array
f(...arr)
Spread een array naar argumenten
const { a, b } = obj;
Object destructuring
const [x, y] = arr;
Array destructuring
(function(){})()
Direct aangeroepen functie (IIFE)
fn.bind(this)
Bind een vaste this-context
Strings
10`Hello ${name}`
Template literal-interpolatie
str.length
Aantal tekens
str.includes('a')
Controleer of een substring bestaat
str.slice(0, 3)
Haal een deel van een string op
str.replace(/a/g, 'b')
Vervang matches (regex)
str.split(',')
Splits naar een array
str.trim()
Verwijder omringende witruimte
str.toUpperCase()
Zet om naar hoofdletters
str.padStart(3, '0')
Vul het begin aan tot een lengte
str.at(-1)
Teken op index (ondersteunt negatief)
Arrays
11arr.map(x => x * 2)
Transformeer elk element
arr.filter(x => x > 0)
Behoud matchende elementen
arr.reduce((a, b) => a + b, 0)
Reduceer tot een enkele waarde
arr.find(x => x.id === 1)
Eerste matchende element
arr.some(x => x > 0)
True als een element matcht
arr.every(x => x > 0)
True als alle elementen matchen
arr.includes(3)
Controleer op een waarde
arr.sort((a, b) => a - b)
Numeriek oplopend sorteren
[...new Set(arr)]
Verwijder dubbele waarden
arr.flat(Infinity)
Volledig afvlakken van geneste arrays
arr.at(-1)
Laatste element (negatieve index)
Objecten
9Object.keys(obj)
Array van eigen opsombare sleutels
Object.values(obj)
Array van eigen waarden
Object.entries(obj)
Array van [key, value]-paren
{ ...a, ...b }
Voeg objecten samen (spread)
Object.assign({}, a, b)
Kopieer/voeg samen in een doel
Object.freeze(obj)
Maak een object onveranderlijk
{ [key]: value }
Berekende eigenschapsnaam
obj.hasOwnProperty('x')
Controleer op een eigen eigenschap
structuredClone(obj)
Diep klonen van een object
Async & promises
9async function f() {}
Declareer een async-functie
await fetch(url)
Wacht tot een promise voltooit
Promise.all([p1, p2])
Wacht tot alle voltooien
Promise.allSettled([p1, p2])
Wacht tot alle afgerond zijn
Promise.race([p1, p2])
Voltooi met de eerste afgeronde
new Promise((res, rej) => {})
Maak een promise handmatig
try { await f(); } catch (e) {}
Behandel async-fouten
setTimeout(fn, 1000)
Voer uit na een vertraging (ms)
queueMicrotask(fn)
Plan een microtask
Control flow
9if (a) {} else if (b) {} else {}
Voorwaardelijke vertakkingen
a ? b : c
Ternaire expressie
switch (x) { case 1: break; }
Meervoudige vertakking
for (const x of arr) {}
Itereer waarden (iterables)
for (const k in obj) {}
Itereer objectsleutels
while (cond) {}
Loop zolang een voorwaarde geldt
arr.forEach((x, i) => {})
Voer een callback per element uit
break / continue
Verlaat of sla een lus-iteratie over
label: for (...) { break label; }
Breek uit geneste lussen
DOM & events
10document.querySelector('.x')
Eerste matchende element
document.querySelectorAll('.x')
Alle matchende elementen (NodeList)
el.addEventListener('click', fn)
Koppel een event listener
el.classList.toggle('active')
Schakel een CSS-klasse
el.dataset.id
Lees een data-id-attribuut
el.textContent = 'hi'
Stel tekst veilig in (geen HTML)
el.setAttribute('aria-hidden', true)
Stel een attribuut in
e.preventDefault()
Annuleer de standaardactie
el.closest('.parent')
Dichtstbijzijnde matchende voorouder
document.createElement('div')
Maak een nieuw element
Classes & modules
9class A extends B {}
Class met overerving
constructor() { super(); }
Initialiseer en roep de parent aan
#private = 1;
Private class-veld
static create() {}
Statische methode op de class
get value() {}
Getter-accessor
export default fn;
Standaard module-export
export { a, b };
Benoemde module-exports
import x, { y } from './m.js'
Standaard + benoemde imports
const m = await import('./m.js')
Dynamische import
Geen vermelding komt overeen met “:q”.
Hulp nodig?
Een probleem met deze tool gevonden? Laat het ons weten.