Kodenya error? Tenang

Cepat atau lambat, ini pasti terjadi. Kamu mengetik kode dengan hati-hati, menekan tombol, lalu muncul tulisan merah menyala. Jantung langsung deg-degan: “Waduh, aku merusak sesuatu.”

Tenang. Kamu nggak merusak apa-apa. Programmer yang sudah kerja bertahun-tahun pun ketemu error setiap hari. Bedanya, mereka sudah nggak panik. Tujuan bab ini cuma satu: bikin kamu jadi kayak mereka.

Error itu teman, bukan hukuman

Sebuah errorErrorPesan dari komputer yang menunjukkan di mana dia bingung dan nggak bisa melanjutkan kodemu.Penjelasan lengkap → adalah pesan dari komputer yang artinya: “Aku bingung, nggak bisa lanjut. Nih, aku kasih tahu bingungnya di mana.” Sedangkan penyebabnya, yaitu kesalahan di dalam kodenya, disebut bugBugKesalahan di dalam kode yang membuat program berjalan nggak sesuai harapan.Penjelasan lengkap →. Bug itu salahnya, error itu laporannya.

Cara membaca pesan error

Pesan error kelihatannya seram, padahal isinya cuma tiga potongan. Ambil contoh yang nanti kamu temui sendiri:

ReferenceError: jumlahklik is not defined (baris 15)

• Jenis error (ReferenceError): kelompok masalahnya.
• Pesan (jumlahklik is not defined): kalimat yang menjelaskan masalahnya. Artinya kira-kira “jumlahklik belum didefinisikan”, alias komputer belum kenal nama itu.
• Lokasi (baris 15): di mana komputer menyadari ada yang janggal.

Tiga jenis yang paling sering muncul buat pemula:

Pesan aslinya berbahasa Inggris, dan bunyinya bisa sedikit berbeda antar browser. Tenang, di kotak latihan kita nanti, setiap error otomatis diterjemahkan ke bahasa Indonesia. Pesan aslinya tetap ditampilkan juga, supaya kamu terbiasa membacanya.

Satu hal yang perlu kamu tahu: nomor baris itu tempat komputer menyadari ada masalah, bukan selalu tempat kamu salah mengetik. Kadang salahnya ada di baris sebelumnya. Makanya kita akan selalu melihat baris yang ditunjuk dan baris di atasnya.

Mencari salah dengan pelan-pelan

Kalau ketemu error, jangan langsung ngetik sana-sini sambil berdoa. Pakai urutan ini. Nama kerennya debuggingDebuggingProses mencari dan memperbaiki bug di dalam kode.Penjelasan lengkap →, yaitu memburu bug.

1. Baca pesannya sampai habis. Jenisnya apa, kalimatnya bilang apa, barisnya berapa. Kebanyakan pemula melewatkan langkah ini.
2. Lihat baris yang ditunjuk, lalu baris sebelumnya. Pandangi pelan-pelan, huruf demi huruf.
3. Cek tiga tersangka utama. Satu, ejaan dan huruf besar-kecil (JavaScript itu case sensitiveCase sensitiveMembedakan huruf besar dan huruf kecil, jadi total dan Total dianggap dua nama yang berbeda.Penjelasan lengkap →, jadi total dan Total dianggap dua nama berbeda). Dua, pasangan tanda: setiap ( punya ), setiap { punya }, setiap kutip pembuka punya kutip penutup. Tiga, jenis kutipnya lurus, bukan kutip miring hasil keyboard HP atau Word (ingat Bab 0).
4. Intip isi kotaknya pakai console.log. Kamu sudah kenal alat ini di Bab 5. Kalau kamu curiga isi sebuah variabel nggak sesuai, tulis console.log(namaVariabel) tepat sebelum baris yang bermasalah. Ibaratnya senter untuk mengintip ke dalam kotak.
5. Ubah satu hal, lalu coba lagi. Ini yang paling penting. Kalau kamu mengubah lima hal sekaligus lalu error-nya hilang, kamu nggak tahu perubahan yang mana yang menolong. Kalau malah makin kacau, kamu juga nggak tahu mana penyebabnya.

Kalau sudah 15 menit buntu, berdiri dulu. Minum, lihat jendela. Banyak programmer menemukan salahnya persis setelah berhenti menatap layar. Cara lain yang aneh tapi manjur: jelaskan masalahnya keras-keras seolah ke temanmu (sebagian programmer bahkan menjelaskan ke bebek karet). Sering kali di tengah menjelaskan, kamu sadar sendiri salahnya di mana.

Coba sendiri: dua bug yang sengaja disembunyikan

Kotak di bawah berisi “Penghitung Klik” kecil. Tombolnya seharusnya menambah hitungan setiap kali diklik, dan menulis Klik ke-1, Klik ke-2, dan seterusnya di console. Tapi kodenya sengaja disisipi dua bug. Tugasmu: temukan dan perbaiki dua-duanya.

<!DOCTYPE html>
<html lang="id">
<body>
  <h1>Penghitung Klik</h1>
  <button id="tombol">Klik aku</button>
  <p id="hasil">Belum diklik.</p>

  <script>
    const tombol = document.getElementById('tombol');
    const hasil = document.getElementById('hasil');
    let jumlahKlik = 0;

    tombol.addEventListener('click', function () {
      jumlahKlik = jumlahKlik + 1;
      hasil.textContent = 'Kamu sudah klik ' + jumlahklik + ' kali';
      console.log('Klik ke-' + jumlahKlik;
    });
  </script>
</body>
</html>

Ikuti langkah ini, dan jangan intip jawaban dulu:

Bug pertama. Lihat bagian bawah kotak. Ada kotak merah bertuliskan “Ada yang salah di baris 16”, lengkap dengan penjelasan ramah dan pesan aslinya, SyntaxError: missing ) after argument list. Perhatikan juga: tombol “Klik aku” tampil, tapi kalau kamu klik, nggak terjadi apa-apa. Itu karena error penulisan (SyntaxError) membuat seluruh skrip nggak dijalankan sama sekali. Baris 16 juga ditandai merah di editor. Hitung kurungnya di baris itu: ada berapa ( dan berapa )?

Sudah ketemu? Barisnya kurang satu kurung tutup. Seharusnya console.log('Klik ke-' + jumlahKlik);. Perbaiki, tunggu sebentar, dan kotak merahnya akan hilang.

Bug kedua. Sekarang klik tombolnya. Muncul kotak merah baru: ReferenceError: jumlahklik is not defined, kali ini di baris 15. Penjelasan ramahnya sudah memberi petunjuk soal huruf besar-kecil. Bandingkan ejaan jumlahklik di baris 15 dengan nama variabel yang dibuat di baris 11.

Ketemu? Di baris 11 namanya jumlahKlik dengan K besar, sementara di baris 15 ditulis jumlahklik. Bagi komputer itu dua nama yang berbeda, jadi dia bilang “aku nggak kenal nama itu”. Ganti jadi jumlahKlik, lalu klik tombolnya lagi. Tulisan di halaman berubah, dan console mencatat Klik ke-1.

Perhatikan bahwa bug kedua tadi bersembunyi di balik bug pertama. Selama skrip nggak bisa dimuat, kamu bahkan nggak sempat melihatnya. Ini normal, dan salah satu alasan kenapa memperbaiki satu hal lalu mencoba lagi itu penting. Kalau buntu, tombol Lihat jawaban ada di kanan atas kotak, dan Kembalikan ke awal akan merusak kodenya lagi kalau kamu mau latihan ulang.

Nanti di laptop: DevTools

Di kotak latihan, kita dimanjakan pesan error yang sudah diterjemahkan. Di dunia nyata, kamu akan melihat error lewat DevToolsDevToolsKotak peralatan bawaan browser untuk programmer, tempat melihat error, console, dan isi halaman.Penjelasan lengkap →, kotak peralatan bawaan browser untuk programmer. Cara membukanya di Chrome:

• Windows: tekan F12, lalu pilih tab Console. Atau langsung tekan Ctrl + Shift + J.
• Mac: tekan Cmd + Option + J untuk langsung membuka Console.

Di sana error muncul sebagai tulisan merah, lengkap dengan jenis, pesan, dan lokasinya, misalnya index.html:16. Tiga potongan yang sama persis dengan yang barusan kamu pelajari, hanya saja tanpa terjemahan. Browser lain punya DevTools yang mirip. Bab 8 akan memindahkan aplikasimu ke laptop, jadi kebiasaan ini akan kepakai.

Satu tips tambahan untuk saat buntu: kamu bisa menyalin pesan error persisnya ke AI dan minta, “jelaskan error ini dengan bahasa sederhana.” Baca dulu pesannya sendiri sebelum bertanya ya. Cara memakai AI dengan benar dan aman dibahas lengkap di Bab 10.