Lembar Contekan JavaScript
Referensi JavaScript modern yang dapat dicari dan dicetak — sintaks, array, string, objek, async/await, DOM, dan fitur ES2022+. Gratis.
Variabel & tipe
10let x = 1;
Variabel ber-scope blok, bisa ditetapkan ulang
const PI = 3.14;
Pengikatan konstanta ber-scope blok
typeof value
Mengembalikan tipe sebagai string
Number('42')
Mengonversi string menjadi angka
String(42)
Mengonversi nilai menjadi string
parseInt('42px', 10)
Mem-parse integer di awal (basis 10)
Boolean(0)
Memaksa nilai menjadi true/false
value ?? 'default'
Nullish coalescing (hanya null/undefined)
a?.b?.c
Optional chaining, berhenti pada null
Array.isArray(x)
Memeriksa apakah nilai berupa array
Fungsi
9function add(a, b) { return a + b; }
Deklarasi fungsi bernama
const add = (a, b) => a + b;
Arrow function dengan return implisit
const f = (a = 1) => a;
Nilai parameter default
function f(...args) {}
Rest parameter dikumpulkan ke dalam array
f(...arr)
Menyebar array menjadi argumen
const { a, b } = obj;
Destructuring objek
const [x, y] = arr;
Destructuring array
(function(){})()
Fungsi langsung dipanggil (IIFE)
fn.bind(this)
Mengikat konteks this yang tetap
String
10`Hello ${name}`
Interpolasi template literal
str.length
Jumlah karakter
str.includes('a')
Memeriksa apakah substring ada
str.slice(0, 3)
Mengambil bagian dari string
str.replace(/a/g, 'b')
Mengganti kecocokan (regex)
str.split(',')
Memecah menjadi array
str.trim()
Menghapus spasi di sekeliling
str.toUpperCase()
Mengubah ke huruf besar
str.padStart(3, '0')
Menambahkan padding di awal sampai panjang tertentu
str.at(-1)
Karakter pada indeks (mendukung negatif)
Array
11arr.map(x => x * 2)
Mengubah setiap elemen
arr.filter(x => x > 0)
Menyimpan elemen yang cocok
arr.reduce((a, b) => a + b, 0)
Mereduksi menjadi satu nilai
arr.find(x => x.id === 1)
Elemen pertama yang cocok
arr.some(x => x > 0)
true jika ada elemen yang cocok
arr.every(x => x > 0)
true jika semua elemen cocok
arr.includes(3)
Memeriksa keberadaan nilai
arr.sort((a, b) => a - b)
Pengurutan numerik menaik
[...new Set(arr)]
Menghapus nilai duplikat
arr.flat(Infinity)
Meratakan array bersarang sepenuhnya
arr.at(-1)
Elemen terakhir (indeks negatif)
Objek
9Object.keys(obj)
Array kunci enumerable milik sendiri
Object.values(obj)
Array nilai milik sendiri
Object.entries(obj)
Array pasangan [key, value]
{ ...a, ...b }
Menggabungkan objek (spread)
Object.assign({}, a, b)
Menyalin/menggabungkan ke target
Object.freeze(obj)
Membuat objek immutable
{ [key]: value }
Nama properti terkomputasi
obj.hasOwnProperty('x')
Memeriksa properti milik sendiri
structuredClone(obj)
Mengklon objek secara mendalam
Async & promise
9async function f() {}
Mendeklarasikan fungsi async
await fetch(url)
Menjeda sampai promise resolve
Promise.all([p1, p2])
Menunggu semua resolve
Promise.allSettled([p1, p2])
Menunggu semua settle
Promise.race([p1, p2])
Resolve dengan yang settle pertama
new Promise((res, rej) => {})
Membuat promise secara manual
try { await f(); } catch (e) {}
Menangani error async
setTimeout(fn, 1000)
Menjalankan setelah jeda (ms)
queueMicrotask(fn)
Menjadwalkan microtask
Alur kontrol
9if (a) {} else if (b) {} else {}
Cabang kondisional
a ? b : c
Ekspresi ternary
switch (x) { case 1: break; }
Cabang banyak arah
for (const x of arr) {}
Mengiterasi nilai (iterable)
for (const k in obj) {}
Mengiterasi kunci objek
while (cond) {}
Loop selama kondisi terpenuhi
arr.forEach((x, i) => {})
Menjalankan callback per elemen
break / continue
Keluar atau lewati iterasi loop
label: for (...) { break label; }
Keluar dari loop bersarang
DOM & event
10document.querySelector('.x')
Elemen pertama yang cocok
document.querySelectorAll('.x')
Semua elemen yang cocok (NodeList)
el.addEventListener('click', fn)
Memasang event listener
el.classList.toggle('active')
Mengalihkan kelas CSS
el.dataset.id
Membaca atribut data-id
el.textContent = 'hi'
Menetapkan teks dengan aman (tanpa HTML)
el.setAttribute('aria-hidden', true)
Menetapkan atribut
e.preventDefault()
Membatalkan aksi default
el.closest('.parent')
Ancestor terdekat yang cocok
document.createElement('div')
Membuat elemen baru
Kelas & modul
9class A extends B {}
Kelas dengan pewarisan
constructor() { super(); }
Menginisialisasi dan memanggil induk
#private = 1;
Field kelas privat
static create() {}
Metode static pada kelas
get value() {}
Accessor getter
export default fn;
Export default modul
export { a, b };
Export modul bernama
import x, { y } from './m.js'
Import default + bernama
const m = await import('./m.js')
Import dinamis
Tidak ada entri yang cocok dengan “:q”.
Butuh bantuan?
Menemukan masalah dengan alat ini? Beri tahu tim kami.