Membaca kode orang lain adalah latihan rutin di pekerjaan nyata. Di satu baris kita bertemu sisa -= 35, di baris lain pesanan.pengiriman?.resi — dua sintaks yang berbeda rumahnya, dan mesin pencari jarang menjelaskan bedanya. Untuk pertanyaan semacam ini, yang kita butuhkan bukan artikel, melainkan kamus resmi bahasa: pohon Reference di MDN.
Chapter ini memetakan cabang-cabang pohon tersebut, melatih cara cepat menemukan API, dan menutupnya dengan latihan memetakan sintaks apa pun ke alamat resminya.
Enam Cabang Reference #
Semuanya berangkat dari https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference . Dari halaman itu, seluruh bahasa terbagi ke enam cabang:
| Cabang | Di bawah URL | Isinya | Contoh entri |
|---|---|---|---|
| Global Objects | /Reference/Global_Objects | standard built-in objects beserta methodnya | Array, String, Math, JSON, Promise, Map |
| Statements | /Reference/Statements | pernyataan yang membentuk alur program | let, for...of, try...catch, import |
| Expressions & Operators | /Reference/Operators | ekspresi penghasil nilai dan operator | ?. (optional chaining), ??, ... (spread) |
| Functions | /Reference/Functions | bentuk-bentuk function | arrow function, default parameters, rest parameters |
| Classes | /Reference/Classes | sintaks class | class declaration, extends, static |
| Errors | /Reference/Errors | daftar galat runtime beserta penyebabnya | “x is not a function”, “is not defined” |
Cabang Errors paling sering terlewat padahal paling membantu saat sibuk. Pesan galat yang muncul di console biasanya persis judul halaman di cabang itu — halamannya menjelaskan penyebab umum dan cara memperbaikinya, lengkap dengan contoh kode yang bermasalah. Cara masuk ke cabang ini dibahas khusus di bagian bawah chapter.
Course ini sudah menyusuri banyak cabang tersebut satu per satu: method array dan string mengisi cabang Global Objects, pengulangan dan percabangan mengisi Statements, section Operators membedah Expressions & Operators, sedangkan Functions dan Classes diuraikan di section Object-Oriented JavaScript. Reference melengkapinya dengan daftar penuh yang resmi — termasuk entri yang belum sempat dibahas di course.
Pola URL Global Objects #
Global Objects adalah cabang yang paling sering dibuka, dan pola URL-nya konsisten:
.../Reference/Global_Objects/<Nama>/<method>Dari pola itu, beberapa alamat bisa ditebak tanpa pencarian: Global_Objects/Array/slice, Global_Objects/JSON/parse, Global_Objects/Math/max. Object yang berdiri sendiri tanpa sub-method cukup satu tingkat: Global_Objects/NaN, Global_Objects/Promise.
Bila ragu, mesin pencari dengan filter site: tetap menjadi jalan cepat:
String.prototype.padStart site:developer.mozilla.org
JSON.parse site:developer.mozilla.orgPerhatikan penamaannya: di hasil pencarian, method ditulis dengan bentuk Nama.prototype.method (Array.prototype.map), sedangkan di URL cukup Nama/method. Keduanya mengarah ke halaman yang sama.
Bentuk prototype hanya berlaku untuk method yang dipanggil lewat instance — "buku".padStart(5). Method static yang dipanggil lewat nama objectnya, seperti Math.max atau JSON.parse, halamannya satu tingkat lebih pendek: Global_Objects/Math/max. Struktur konsisten inilah yang membuat kebiasaan menebak URL terasa aman.
Latihan Memetakan Sintaks ke Cabangnya #
Kecepatan mencari ditentukan oleh satu keterampilan: menentukan cabang tempat sebuah sintaks berada. Ada tiga pertanyaan pemandu — apakah dipanggil lewat object bawaan (Global Objects), apakah pernyataan lengkap yang membentuk alur program (Statements), ataukah menghasilkan nilai dari operasi antar nilai (Expressions & Operators). Latihan berikut memetakan satu berkas kode yang memuat keempat dunia itu:
// peta-rujukan.js — setiap sintaks punya alamat di pohon Reference MDN
// Jalankan di terminal: node peta-rujukan.js
// Reference > Global Objects > Math.max()
console.log(Math.max(3, 7, 1));
// Reference > Statements > let declaration
let sisa = 100;
sisa -= 35; // Reference > Expressions & Operators > Subtraction assignment
console.log(sisa);
// Reference > Expressions & Operators > Optional chaining (?.)
const pesanan = { pembeli: { nama: "Budi" } };
console.log(pesanan.pembeli?.nama);
console.log(pesanan.pengiriman?.resi);Output yang Dihasilkan:
7
65
Budi
undefinedMari kita telaah peta yang tertulis di komentar:
- Baris 6 (
Math.max(3, 7, 1)): dipanggil lewat object bawaanMath, jadi alamatnya Global Objects > Math.maxadalah method static — dipanggil lewat nama objectnya, tanpa instance. - Baris 9–10 (
let sisadansisa -= 35): satu baris kecil milik dua cabang berbeda. Deklarasiletada di Statements, sedangkan-=ada di Expressions & Operators dengan nama halaman Subtraction assignment. - Baris 13–15 (
pesanan.pembeli?.nama): tanda?.adalah Optional chaining di cabang Expressions & Operators. Keluaranundefineddi baris terakhir sesuai perilaku yang dibahas di section Operators: jalur yang terputus menghasilkanundefined, bukan galat.
Latihan ini bisa dijalankan setiap kali membaca kode asing: tulis komentar berisi cabangnya di atas baris yang belum dikenal. Setelah beberapa hari, pohon itu hafal dengan sendirinya — dan pencarian berubah dari “mengetik dan berharap” menjadi “membuka alamat yang sudah diketahui”.
Saat Galat Muncul: Cabang Errors #
Cara masuk ke cabang Errors paling sering tidak lewat daftar isi, melainkan lewat galat itu sendiri. Misalnya console menampilkan TypeError: pesanan.kirim is not a function. Pesan itu adalah alamat pencarian yang siap pakai:
TypeError: x is not a function site:developer.mozilla.orgHalaman Error di cabang Errors menjelaskan tiga penyebab umum pola “is not a function”: nama method salah tulis, method itu tidak ada pada tipe nilai yang dipanggil — misalnya memanggil kirim pada string — atau nama yang sama sudah dipakai variabel lain sehingga nilai yang dipanggil bukan lagi object yang diharapkan. Dengan membaca halaman resminya, kita mendapat ketiga kemungkinan itu sekaligus, bukan satu jawaban yang kebetulan cocok.
Kebiasaannya mudah dipelihara: saat galat runtime muncul, salin pesan persisnya, tambahkan filter site:, dan buka halaman Error-nya sebelum menebak-nebak memperbaiki kode.
Memilih Halaman yang Tepat #
Pohon Reference juga membantu memilih jenis halaman yang sesuai pertanyaan:
| Pertanyaan | Halaman yang cocok |
|---|---|
“Apa persisnya hasil padStart?” | Reference — halaman method-nya |
“Kapan sebaiknya memakai padStart?” | Guide, atau bab terkait di course ini |
| “Kenapa hasilnya begini di level bahasa?” | Reference → tautan Specifications → spec (chapter ECMAScript Specification) |
Satu latihan kecil yang mempercepat penguasaan pohon: sekali sepekan, buka satu entri Global Objects yang belum pernah dibaca — Intl, WeakMap, Reflect, apa pun namanya — dan habiskan lima menit membaca ringkasan serta satu contohnya. Tidak perlu memakainya langsung; cukup menyimpan bentuknya di kepala. Bila suatu hari masalah nyata menuntut alat itu, kita sudah tahu bahwa rujukannya ada dan di mana mencarinya.
Bahasa sudah terpetakan dari dua sisi: spec di ujung yang menjelaskan kenapa, pohon Reference di ujung yang memastikan apa. Peta yang tersisa ada di alat: runner pengujian, otomasi browser, dan library pengujian UI. Chapter terakhir section ini memetakannya.
Berkas Sumber
Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.
peta-rujukan.js
Unduh berkas// peta-rujukan.js — setiap sintaks punya alamat di pohon Reference MDN
// Jalankan di terminal: node peta-rujukan.js
// Global Objects -> Math.max()
console.log(Math.max(3, 7, 1));
// Statements -> let declaration
let sisa = 100;
sisa -= 35; // Operators -> Subtraction assignment
console.log(sisa);
// Expressions -> Optional chaining
const pesanan = { pembeli: { nama: "Budi" } };
console.log(pesanan.pembeli?.nama);
console.log(pesanan.pengiriman?.resi);