Ilustrasi sampul artikel: Try Catch JavaScript Adalah: Panduan Error Handling untuk Pemula
·JavaScriptPemulaWeb Development

Try Catch JavaScript Adalah: Panduan Error Handling untuk Pemula

Try catch JavaScript adalah cara menangani error agar aplikasi tidak crash. Pelajari alur try, catch, finally, membaca error object (err.name, err.message), dan melempar error sendiri dengan throw, lengkap dengan playground interaktif.

Pembuat Hyper Sheets & BelajarWeb.dev

Try catch JavaScript adalah cara menangani error supaya program tidak langsung mati (crash) ketika terjadi kesalahan saat berjalan. Kamu membungkus kode yang berisiko gagal di dalam blok try, lalu kalau ada error, JavaScript akan “melompat” ke blok catch untuk menanganinya dengan tenang, alih-alih menghentikan seluruh skrip. Dengan begitu aplikasimu tetap hidup, dan kamu bisa menampilkan pesan yang ramah ke pengguna daripada membiarkan halaman rusak diam-diam.

Di panduan ini kamu akan belajar kenapa error bisa menghentikan skrip, bagaimana alur trycatchfinally bekerja, cara membaca informasi dari error object (err.name dan err.message), cara melempar error sendiri dengan throw new Error(...), sampai satu catatan penting: try/catch hanya menangkap error yang sinkron. Ada playground interaktif juga supaya kamu bisa langsung melihat try dan catch beraksi.

Kenapa Error Bisa Menghentikan Skrip?

Ketika JavaScript menemui error yang tidak ditangani, ia akan berhenti di baris itu juga. Semua kode setelahnya tidak dijalankan, seakan-akan program “menabrak tembok”. Coba lihat contoh ini:

const data = JSON.parse("{ini bukan json}")  // 💥 error di sini
console.log("Baris ini tidak akan pernah jalan")

JSON.parse gagal karena teksnya bukan JSON yang valid, lalu ia melempar (throw) sebuah error. Karena tidak ada yang menangkapnya, error itu naik terus sampai menghentikan skrip. Baris console.log di bawahnya tidak akan dieksekusi. Di aplikasi nyata, satu error kecil seperti ini bisa membuat seluruh halaman berhenti merespons.

Solusinya adalah membungkus kode berisiko itu dengan try/catch, supaya error bisa “ditangkap” dan program bisa lanjut dengan aman.

Alur Try → Catch → Finally

Struktur dasarnya terdiri dari tiga blok. Bacalah dari atas ke bawah:

try {
  // 1. Kode yang mungkin gagal ditaruh di sini
  const data = JSON.parse(input)
  console.log("Sukses:", data)
} catch (err) {
  // 2. Jalan HANYA kalau ada error di blok try
  console.log("Terjadi error:", err.message)
} finally {
  // 3. SELALU jalan, baik error maupun tidak
  console.log("Selesai memproses.")
}

Cara membacanya begini. JavaScript menjalankan isi try dulu. Kalau semua baris berhasil tanpa masalah, blok catch dilewati sepenuhnya. Tapi kalau ada baris di dalam try yang melempar error, JavaScript langsung berhenti di situ dan melompat ke blok catch, membawa serta object error-nya lewat parameter err. Terakhir, apa pun yang terjadi, sukses atau gagal, blok finally selalu dijalankan di akhir. Blok finally bersifat opsional; kamu boleh cuma memakai try/catch saja tanpa finally.

Coba Sendiri

✓ Sukses

Hasil eksekusi

Blok try berhasil, object terparsing:

{
  "nama": "Budi"
}

Blok finally selalu dijalankan.

try {
const data = JSON.parse(input)
// ✓ jalur sukses
} catch (err) {
// ✕ err.name / err.message
} finally {
// selalu jalan
}

Playground di atas benar-benar menjalankan JSON.parse di dalam try/catch yang asli. Ganti isinya dengan JSON valid seperti {"nama":"Budi"} untuk melihat jalur sukses, atau JSON rusak seperti {nama:Budi} (tanpa tanda kutip) untuk melihat blok catch menangkap error sungguhan, perhatikan bahwa blok finally tetap jalan di kedua kasus.

Membaca Error Object: err.name dan err.message

Parameter err di dalam catch bukan sekadar teks, ia adalah sebuah object yang berisi detail tentang apa yang salah. Dua properti yang paling sering kamu pakai:

  • err.name, jenis error-nya, misalnya "SyntaxError", "TypeError", atau "ReferenceError".
  • err.message, penjelasan singkat tentang apa yang terjadi, dalam bentuk kalimat.
try {
  const data = JSON.parse("{rusak}")
} catch (err) {
  console.log(err.name)     // "SyntaxError"
  console.log(err.message)  // penjelasan detail dari JavaScript
}

Dengan membaca kedua properti ini kamu bisa menampilkan pesan yang berguna ke pengguna, atau mencatat error ke sistem logging untuk kamu selidiki nanti.

Melempar Error Sendiri dengan throw

Kamu tidak harus menunggu JavaScript yang melempar error, kamu bisa membuat dan melempar error sendiri dengan kata kunci throw. Ini berguna untuk memberi tahu bahwa suatu kondisi tidak valid menurut aturan bisnismu, misalnya umur negatif atau field yang kosong.

function daftar(umur) {
  if (umur < 0) {
    throw new Error("Umur tidak boleh negatif")
  }
  return "Berhasil mendaftar"
}

try {
  daftar(-5)
} catch (err) {
  console.log(err.message)  // "Umur tidak boleh negatif"
}

throw new Error(...) membuat sebuah error object baru dengan pesan yang kamu tentukan, lalu melemparkannya. Sama seperti error bawaan, error yang kamu lempar sendiri juga akan ditangkap oleh blok catch terdekat, dan pesanmu bisa dibaca lewat err.message.

Peran Tiap Blok: try, catch, finally, throw

Supaya makin jelas, berikut ringkasan tugas masing-masing bagian:

Bagian Peran Kapan jalan
try Membungkus kode yang berisiko gagal Selalu dijalankan lebih dulu
catch Menangani error yang terjadi di try Hanya jika ada error di try
finally Kode penutup / bersih-bersih Selalu, baik error maupun tidak
throw Melempar error secara sengaja Saat kamu memanggilnya

Ingat: try dan catch adalah pasangan wajib untuk menangani error, finally opsional, dan throw adalah cara memicu error yang nantinya ditangkap oleh catch.

Catatan Penting: Try/Catch Hanya untuk Error Sinkron

Ada satu jebakan yang wajib kamu tahu. try/catch hanya menangkap error yang terjadi secara sinkron, yaitu error yang muncul saat baris kode dijalankan langsung, satu per satu. Untuk operasi asinkron (async) seperti mengambil data dari internet, error-nya terjadi “nanti”, di luar jangkauan try/catch biasa.

// ❌ Ini TIDAK menangkap error dari fetch
try {
  fetch("https://api.example.com/data")  // async, error-nya lolos
} catch (err) {
  console.log("Tidak akan tertangkap di sini")
}

Cara yang benar untuk menangkap error async dengan async/await adalah menaruh await di dalam try/catch:

async function ambilData() {
  try {
    const response = await fetch("https://api.example.com/data")
    const data = await response.json()
    console.log(data)
  } catch (err) {
    console.log("Gagal mengambil data:", err.message)
  }
}

Karena await “menunggu” hasilnya di dalam blok try, error yang muncul dari operasi async kini bisa ditangkap dengan benar oleh catch. Konsep ini akan jauh lebih masuk akal setelah kamu memahami Promise dan async/await di dua panduan yang tadi disebut.

Cek Pemahaman

Blok mana yang SELALU dijalankan, baik terjadi error maupun tidak?

FAQ Seputar Try Catch JavaScript

Apa itu try catch dengan bahasa sederhana?

try/catch adalah cara membungkus kode yang mungkin gagal supaya error-nya tidak menghentikan seluruh program. Kode berisiko ditaruh di blok try; kalau terjadi error, JavaScript melompat ke blok catch untuk menanganinya dengan tenang. Aplikasimu tetap berjalan alih-alih crash, dan kamu bisa menampilkan pesan yang ramah ke pengguna.

Apa bedanya catch dan finally?

Blok catch hanya dijalankan kalau ada error di dalam try, dan tugasnya menangani error itu. Blok finally dijalankan selalu, baik error maupun tidak, sehingga cocok untuk kode penutup seperti bersih-bersih atau menyembunyikan loading. Kalau tidak ada error, catch dilewati tapi finally tetap jalan.

Apa fungsi throw di JavaScript?

throw dipakai untuk melempar error secara sengaja, biasanya dengan throw new Error("pesan"). Ini berguna ketika kamu ingin menandai bahwa suatu kondisi tidak valid menurut aturanmu sendiri, misalnya input kosong atau angka di luar batas. Error yang kamu lempar akan ditangkap oleh blok catch terdekat, sama seperti error bawaan JavaScript.

Kenapa try/catch tidak menangkap error async?

Karena try/catch biasa hanya menangkap error yang terjadi secara sinkron, saat baris kode dijalankan langsung. Operasi async seperti fetch menyelesaikan pekerjaannya “nanti”, di luar jangkauan try/catch yang sudah selesai berjalan. Untuk menangkap error async, pakai .catch() pada Promise atau taruh await di dalam try/catch sebuah fungsi async.

Lanjut Belajar Error Handling

Sekarang kamu sudah paham fondasi error handling: kenapa error bisa menghentikan skrip, alur trycatchfinally, cara membaca err.name dan err.message, serta melempar error sendiri dengan throw. Langkah terbaik berikutnya adalah mempraktikkannya langsung sampai jadi kebiasaan.

Kerjakan pelajaran error handling interaktif di Hyper Sheets yang bisa langsung kamu jalankan di browser tanpa setup, lengkap dengan latihan bertahap. Setelah itu lanjut ke Promise JavaScript adalah dan async await adalah supaya kamu tahu cara menangani error pada operasi asinkron dengan benar. Mulai dari kecil, tangani error dengan anggun, dan aplikasimu akan jauh lebih tangguh.