Cheat Sheet JavaScript
Terakhir diperbarui
Variabel (let, const, var)
Mendeklarasikan nilai; utamakan const, lalu let, dan hindari var.
| Operasi | Sintaks |
|---|---|
| Lingkup blok, bisa diisi ulang | let count = 0; |
| Lingkup blok, tidak bisa diisi ulang | const name = "Ada"; |
| Lingkup fungsi (lama) | var x = 1; |
| Deklarasi tanpa nilai | let result; |
| Beberapa deklarasi | let a = 1, b = 2; |
| Object konstan (isinya bisa diubah) | const user = {}; user.id = 1; |
Tipe data
Tipe primitif dan tipe reference, plus cara memeriksanya.
| Tipe | Contoh |
|---|---|
| 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; |
| Memeriksa tipe | typeof n |
| Konversi | Number("7"), String(42), Boolean(0) |
String & template literal
Menyusun dan mengolah teks.
| Operasi | Sintaks |
|---|---|
| Template literal | Hi ${name}, age ${age} (dibungkus backtick) |
| Panjang | text.length |
| Huruf besar / kecil | text.toUpperCase(), text.toLowerCase() |
| Menghapus spasi di tepi | text.trim() |
| Mengganti semua | text.replaceAll("a", "b") |
| Memecah menjadi array | text.split(",") |
| Mengandung teks | text.includes("js") |
| Slice | text.slice(0, 3) |
Array & method array
Kumpulan berurutan dan method untuk mengiterasinya.
| Operasi | Sintaks |
|---|---|
| Menambah / menghapus di akhir | arr.push(4), arr.pop() |
| Menambah / menghapus di awal | arr.unshift(0), arr.shift() |
| Mengubah setiap item | arr.map(x => x * 2) |
| Menyisakan item yang cocok | arr.filter(x => x > 0) |
| Meringkas menjadi satu nilai | arr.reduce((sum, x) => sum + x, 0) |
| Mencari item | arr.find(x => x.id === 1) |
| Menguji sebagian / semua | arr.some(f), arr.every(f) |
| Indeks sebuah nilai | arr.indexOf(3), arr.includes(3) |
| Menggabungkan menjadi string | arr.join(", ") |
Object
Kumpulan key-value.
| Operasi | Sintaks |
|---|---|
| Membuat | const user = { id: 1, name: "Ada" }; |
| Mengakses property | user.name, user["name"] |
| Menambah / memperbarui property | user.age = 25; |
| Menghapus property | delete user.age; |
| Mengambil semua key / value | Object.keys(user), Object.values(user) |
| Mengambil entries | Object.entries(user) |
| Menggabungkan object | Object.assign({}, a, b) |
| Salinan dangkal (shallow copy) | const copy = { ...user }; |
Alur kontrol
Percabangan dan perulangan.
| Operasi | Sintaks |
|---|---|
| If / else if / else | if (x > 0) { … } else { … } |
| Ternary | const y = x > 0 ? 1 : 0; |
| Switch | switch (x) { case 1: … break; } |
| For loop | for (let i = 0; i < 5; i++) { … } |
| For-of (nilai) | for (const item of arr) { … } |
| For-in (key) | for (const key in obj) { … } |
| While loop | while (x < 10) { … } |
Fungsi & arrow function
Mendefinisikan blok kode yang bisa dipakai ulang dan dipanggil.
| Operasi | Sintaks |
|---|---|
| Deklarasi fungsi | function add(a, b) { return a + b; } |
| Arrow function | const add = (a, b) => a + b; |
| Arrow function dengan satu argumen | const sq = x => x * x; |
| Arrow function tanpa argumen | const now = () => Date.now(); |
| Parameter default | function f(x = 0) { … } |
| Rest parameter | function f(...args) { … } |
| Langsung dipanggil (IIFE) | (() => { … })(); |
Destructuring & spread
Membongkar nilai serta menyalin/menggabungkan struktur.
| Operasi | Sintaks |
|---|---|
| Destructuring array | const [a, b] = arr; |
| Destructuring object | const { id, name } = user; |
| Mengganti nama saat membongkar | const { id: userId } = user; |
| Nilai default | const { age = 0 } = user; |
| Spread array | const all = [...a, ...b]; |
| Spread object | const next = { ...user, age: 25 }; |
| Rest dalam destructuring | const [first, ...rest] = arr; |
Promise & async/await
Menangani pekerjaan asinkron seperti request jaringan.
| Operasi | Sintaks |
|---|---|
| Fungsi async | async function load() { … } |
| Menunggu promise dengan await | const data = await fetch(url); |
| Then / catch | promise.then(res => …).catch(err => …) |
| Try / catch dengan await | try { await f(); } catch (e) { … } |
| Resolve / reject | Promise.resolve(1), Promise.reject(err) |
| Menunggu semuanya | await Promise.all([a, b]) |
| Yang pertama selesai | await Promise.race([a, b]) |
Sintaks JavaScript modern yang paling sering kamu pakai, dalam satu halaman. Cheat sheet JavaScript ini adalah referensi cepat untuk ES6+ sehari-hari: mendeklarasikan variabel, method string dan method array, object, arrow function, destructuring, dan async/await.
Semua yang ada di sini adalah JavaScript standar yang berjalan di browser modern dan Node.js. Salin yang kamu butuhkan, atau coba potongan kode apa pun langsung di playground JS, tanpa perlu instalasi. Baru mulai? Kursus JavaScript interaktif gratis dari Coddy mengajarkan sintaks yang sama lewat praktik langsung.
FAQ cheat sheet JavaScript
Apakah cheat sheet JavaScript ini gratis?
Ya. Cheat sheet JavaScript ini sepenuhnya gratis, tanpa perlu daftar. Simpan di bookmark dan kembali kapan pun kamu perlu mencari sintaks, method array, atau pola async.
Apa perbedaan == dan === di JavaScript?
== adalah kesamaan longgar: operand diubah ke tipe yang sama sebelum dibandingkan, jadi 0 == "0" bernilai true. === adalah kesamaan ketat: membandingkan nilai dan tipe tanpa konversi, jadi 0 === "0" bernilai false. Utamakan === (dan !==) di hampir semua kasus, karena hasilnya bisa ditebak dan terhindar dari konversi tipe yang mengejutkan.Apa perbedaan let, const, dan var?
const dan let berlingkup blok dan ditambahkan di ES6; var berlingkup fungsi dan lebih lama. Pakai const untuk nilai yang tidak pernah kamu isi ulang, let untuk nilai yang akan diisi ulang, dan hindari var untuk mencegah bug hoisting dan scope. Perlu diingat, isi object atau array const tetap bisa diubah; yang konstan hanya ikatannya.Bisakah saya berlatih JavaScript secara online?
Bisa. Buka playground JS untuk menjalankan potongan kode apa pun dari cheat sheet ini di browsermu, tanpa perlu instalasi. Kalau kamu ingin belajar terarah, kursus JavaScript interaktif gratis dari Coddy membawamu dari variabel dan perulangan sampai method array dan async/await, langkah demi langkah.
Apakah cheat sheet ini cocok untuk pemula?
Cocok. Isinya disusun mulai dari dasar (variabel, tipe data, string) sampai destructuring dan async/await, jadi kamu bisa memakai bagian atas sejak hari pertama dan pelan-pelan menguasai fitur ES6+ modern.
Sumber terkait
Cheat sheet lainnya
