JavaScript - try...catch: Memahami Penanganan Error untuk Pemula

Hai, para pemrogram yang sedang belajar! Hari ini, kita akan melangsungkan sebuah perjalanan menarik ke dunia penanganan error dalam JavaScript. Jangan khawatir jika Anda baru belajar programming – saya akan memandu Anda di setiap langkah dengan banyak contoh dan penjelasan. Pada akhir tutorial ini, Anda akan bisa menangkap error seperti seorang ahli!

Statement try...catch di JavaScript

Bayangkan Anda belajar menunggang sepeda. Anda mungkin akan jatuh beberapa kali, tetapi itu baik – Anda bangkit dan mencoba lagi. Dalam programming, kita menggunakan statement try...catch untuk melakukan hal yang sama. Kita "coba" menjalankan beberapa kode, dan jika ia "jatuh" (mengeluarkan error), kita "tangkap"nya dan menanganinya dengan mulus.

mari lihat contoh sederhana:

try {
// Kode yang mungkin menyebabkan error
console.log(nonExistentVariable);
} catch (error) {
// Kode untuk menangani error
console.log("Ups! Terjadi error:", error.message);
}

Dalam contoh ini, kita mencoba untuk mencetak variabel yang tidak ada. Sebaliknya terjadi kesalahan yang menghancurkan program kita, blok catch menangkap error dan mencetak pesan yang ramah.

Statement try...catch...finally di JavaScript

kadang-kadang, kita ingin menjalankan beberapa kode tanpa menghiraukan apakah terjadi error atau tidak. Itu adalah saat blok finally berguna. Itu seperti mengatakan, "Tidak peduli apa yang terjadi, pastikan melakukan ini!"

try {
console.log(" mari cobا untuk membagi nol!");
let result = 10 / 0;
console.log("Hasil:", result);
} catch (error) {
console.log("Oh no! Terjadi error:", error.message);
} finally {
console.log("Ini akan selalu dijalankan, error atau tidak!");
}

Dalam contoh ini, meskipun membagi nol menyebabkan error, blok finally tetap dieksekusi.

Statement Throw di JavaScript

kadang-kadang, kita ingin membuat error sendiri. Kita dapat melakukan ini menggunakan statement throw. Itu seperti menjadi wasit dalam sebuah permainan dan menyebutkan pelanggaran saat Anda melihatnya.

function checkAge(age) {
if (age < 0) {
throw new Error("Umur tidak bisa negatif!");
}
console.log("Umur valid:", age);
}

try {
checkAge(-5);
} catch (error) {
console.log("Menangkap error:", error.message);
}

Di sini, kita melempar error sendiri saat seseorang mencoba menggunakan umur negatif.

Menyusun Blok Try

Seperti menyusun boneka, kita dapat menyusun blok try...catch di dalam yang lain. Ini sangat berguna saat kita ingin menangani error di level yang berbeda dalam kode kita.

try {
try {
throw new Error("Ups!");
} catch (innerError) {
console.log("Inner catch:", innerError.message);
throw innerError; // Melempar error kembali
}
} catch (outerError) {
console.log("Outer catch:", outerError.message);
}

Dalam contoh ini, kita menangkap error di blok dalam, mencetaknya, dan kemudian melempar error kembali ke blok luar.

Melempar Error Kembali

kadang-kadang, kita ingin menangkap error, melakukan sesuatu dengannya, dan kemudian meneruskannya ke tempat lain untuk ditangani. Ini disebut melempar error kembali.

function doSomethingRisky() {
throw new Error("Bahaya, Will Robinson!");
}

try {
doSomethingRisky();
} catch (error) {
console.log("Mencatat error:", error.message);
throw error; // Melempar error kembali
}

Di sini, kita menangkap error, mencatatnya, dan kemudian melempar error kembali untuk ditangani oleh bagian lain dari kode kita.

Blok Catch Conditional

Dalam beberapa kasus, kita mungkin ingin menangani jenis error yang berbeda secara berbeda. Kita dapat melakukan ini dengan memeriksa jenis error di blok catch.

try {
let randomNumber = Math.random();
if (randomNumber < 0.5) {
throw new TypeError("Error tipe!");
} else {
throw new RangeError("Error rentang!");
}
} catch (error) {
if (error instanceof TypeError) {
console.log("Menangani TypeError:", error.message);
} else if (error instanceof RangeError) {
console.log("Menangani RangeError:", error.message);
} else {
console.log("Error tak diketahui:", error.message);
}
}

Contoh ini menunjukkan bagaimana kita dapat menangani jenis error yang berbeda dalam cara yang berbeda.

JavaScript try...catch dengan Metode setTimeout()

Saat bekerja dengan kode asinkron, penanganan error bisa sulit. mari lihat bagaimana menangani error dalam fungsi setTimeout().

try {
setTimeout(() => {
throw new Error("Error asinkron!");
}, 1000);
} catch (error) {
console.log("Ini tidak menangkap error!");
}

// Cara yang benar:
setTimeout(() => {
try {
throw new Error("Error asinkron!");
} catch (error) {
console.log("Menangkap error asinkron:", error.message);
}
}, 1000);

Upaya pertama tidak akan bekerja karena error dilempar setelah blok try...catch selesai dieksekusi. Upaya kedua menangkap error dengan benar.

Error Berdasarkan Promise

Saat bekerja dengan Promises, kita menggunakan .catch() untuk menangani error. Itu seperti blok catch, tapi untuk operasi asinkron.

function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error("Gagal mengambil data"));
}, 1000);
});
}

fetchData()
.then(data => console.log("Data:", data))
.catch(error => console.log("Error:", error.message));

Dalam contoh ini, kita mensimulasikan kegagalan pengambilan data dan menangkap error yang timbul.

Jenis Error di JavaScript

JavaScript memiliki beberapa jenis error bawaan. Berikut adalah tabel yang menggabungkannya:

Jenis Error	Deskripsi
Error	Jenis error umum
SyntaxError	Terjadi saat ada kesalahan sintaks di kode
ReferenceError	Terjadi saat mengacu pada variabel yang tidak ada
TypeError	Terjadi saat nilai bukan jenis yang diharapkan
RangeError	Terjadi saat nilai bukan dalam rentang yang diharapkan
URIError	Terjadi saat menggunakan fungsi penanganan URI global secara salah
EvalError	Terjadi saat menggunakan fungsi eval() secara salah

Memahami jenis error ini dapat membantu Anda menulis kode penanganan error yang lebih tepat.

Dan itu saja! Anda telah menyelesaikan kursus penanganan error JavaScript. Ingat, error bukan musuh Anda – mereka adalah umpan balik berharga yang membantu Anda menulis kode yang lebih baik dan lebih kuat. Teruslatih, tetap ciek, dan kodingsenang!

Credits: Image by storyset