Errors di JavaScript: Cara Mengatasi dan Contoh Codenya

Pernyataan try memungkinkan kita untuk menguji blok kode terhadap error atau kesalahan.

Pernyataan catch memungkinkan Anda menangani error tersebut.

Pernyataan throw memungkinkan Anda membuat kesalahan khusus.

Pernyataan finally memungkinkan untuk mengeksekusi kode, setelah try dan throw , apa pun hasilnya.

Section Artikel

1 Kesalahan Akan Terjadi!
2 Try dan Catch JavaScript
3 JavaScript Throws Error
4 Statement throw
5 Contoh Validasi Input
6 HTML Validation
7 Pernyataan finally
8 Objek Kesalahan
9 Properti Objek Kesalahan
10 Nilai dari Nama Kesalahan
11 Eval Error
12 Range Error
13 Reference Error
14 Syntax Error
15 Type Error
16 Kesalahan URI (Uniform Resource Identifier)
17 Properti Objek Kesalahan Non-Standar

Kesalahan Akan Terjadi!

Saat menjalankan kode JavaScript, kesalahan apapun dapat terjadi.

Kesalahan dapat berupa kesalahan pengkodean yang dilakukan oleh programmer, kesalahan karena input yang salah, dan hal-hal yang tidak terduga lainnya.

Contoh:
Dalam contoh ini kami telah menulis peringatan sebagai adddlert untuk sengaja menghasilkan error.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Error Handling</h2>

<p> Contoh ini menunjukkan cara menggunakan <b> catch </b> untuk menampilkan kesalahan. </p>
<p id="demo"></p>

<script>
try {
  adddlert("Welcome guest!");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
}
</script>

</body>
</html>

JavaScript menangkap adddlert sebagai kesalahan, dan menjalankan kode catch untuk menanganinya.

Try dan Catch JavaScript

Pernyataan try memungkinkan Anda untuk menentukan blok kode yang akan diuji terhadap kesalahan saat sedang dijalankan.

Pernyataan catch memungkinkan Anda untuk menentukan blok kode yang akan dieksekusi, jika terjadi kesalahan di blok percobaan.

Pernyataan JavaScript try dan catch digunakan secara berpasangan:

try {
  Block of code to try
}
catch(err) {
  Block of code to handle errors
}

JavaScript Throws Error

Saat terjadi kesalahan, JavaScript biasanya akan berhenti dan menghasilkan pesan kesalahan.

Istilah teknis untuk ini adalah: JavaScript akan mengeluarkan pengecualian (memunculkan kesalahan).

JavaScript sebenarnya akan membuat objek Error dengan dua properti: nama dan pesan.

Statement throw

Pernyataan throw memungkinkan Anda membuat kesalahan khusus.

Secara teknis Anda bisa melempar pengecualian (membuat kesalahan).

Pengecualian dapat berupa String JavaScript, Angka, Boolean, atau Objek:

throw "Too big";    // throw a text
throw 500;          // throw a number

Jika Anda menggunakan throw bersama dengan try dan catch, Anda dapat mengontrol flow program dan menghasilkan pesan kesalahan khusus.

Contoh Validasi Input

Contoh ini membahas tentang inputan. Jika nilainya salah, pengecualian (err) dilemparkan.

Pengecualian (err) ditangkap oleh pernyataan catch dan pesan kesalahan kustom ditampilkan.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p> Harap masukkan angka antara 5 dan 10: </p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="p01"></p>

<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "")  throw "empty";
    if(isNaN(x)) throw "not a number";
    x = Number(x);
    if(x < 5)  throw "too low";
    if(x > 10)   throw "too high";
  }
  catch(err) {
    message.innerHTML = "Input is " + err;
  }
}
</script>

</body>
</html>

HTML Validation

Kode di atas hanyalah sebuah contoh.

Browser modern akan sering menggunakan kombinasi JavaScript dan validasi HTML bawaan, menggunakan aturan validasi yang telah ditentukan sebelumnya yang ditentukan dalam atribut HTML:

<input id="demo" type="number" min="5" max="10" step="1">

Pernyataan finally

Pernyataan finally memungkinkan Anda mengeksekusi kode, setelah try dan catch, apa pun hasilnya.

Sintaks:

try {
  Block of code to try
}
catch(err) {
  Block of code to handle errors
}
finally {
  Block of code to be executed regardless of the try / catch result
}

Contoh:

<!DOCTYPE html>
<html>
<body>

<p> Harap masukkan angka antara 5 dan 10: </p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>

<p id="p01"></p>

<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "")  throw "is empty";
    if(isNaN(x)) throw "is not a number";
    x = Number(x);
    if(x > 10)   throw "is too high";
    if(x < 5)  throw "is too low";
  }
  catch(err) {
    message.innerHTML = "Input " + err;
  }
  finally {
    document.getElementById("demo").value = "";
  }
}
</script>

</body>
</html>

Objek Kesalahan

JavaScript memiliki objek kesalahan bawaan yang memberikan informasi kesalahan saat terjadi kesalahan.

Objek kesalahan menyediakan dua properti yang berguna: nama dan pesan.

Properti Objek Kesalahan

Property	Description
name	Mengatur atau mengembalikan nama kesalahan
message	Mengatur atau mengembalikan pesan kesalahan (string)

Nilai dari Nama Kesalahan

Enam nilai berbeda dapat dikembalikan oleh properti nama kesalahan:

Error Name	Deskripsi
EvalError	Terjadi kesalahan dalam fungsi eval ()
RangeError	Telah terjadi angka “di luar jangkauan”
ReferenceError	Referensi ilegal telah terjadi
SyntaxError	Terjadi kesalahan sintaks
TypeError	Telah terjadi kesalahan tipe
URIError	Terjadi kesalahan dalam encodeURI()

Enam nilai berbeda dijelaskan di bawah ini.

Eval Error

EvalError menunjukkan kesalahan dalam fungsi eval().

Versi JavaScript yang lebih baru tidak menampilkan EvalError. Gunakan SyntaxError sebagai gantinya.

Range Error

RangeError dilemparkan jika Anda menggunakan angka yang berada di luar rentang nilai legal.

Misalnya: Anda tidak dapat mengatur jumlah digit signifikan sebuah angka menjadi 500.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p> Anda tidak dapat menyetel jumlah digit signifikan dari sebuah angka menjadi 500: </p>
<p id="demo">

<script>
var num = 1;
try {
  num.toPrecision(500);
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Reference Error

ReferenceError dilempar jika Anda menggunakan (referensi) variabel yang belum dideklarasikan.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p> Anda tidak dapat menggunakan nilai dari variabel yang tidak ada: </p>
<p id="demo"></p>

<script>
var x;
try {
  x = y + 1;
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Syntax Error

SyntaxError muncul jika Anda mencoba mengevaluasi kode dengan kesalahan sintaks.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p> Anda tidak dapat mengevaluasi kode yang mengandung kesalahan sintaksis: </p>
<p id="demo"></p>

<script>
try {
  eval("alert('Hello)");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Type Error

TypeError muncul jika Anda menggunakan nilai yang berada di luar kisaran tipe yang diharapkan:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p> Anda tidak dapat mengubah angka menjadi huruf besar: </p>
<p id="demo"></p>

<script>
var num = 1;
try {
  num.toUpperCase();
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Kesalahan URI (Uniform Resource Identifier)

URIError muncul jika Anda menggunakan karakter ilegal dalam fungsi URI:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p> Beberapa karakter tidak dapat didekode dengan decodeURI(): </p>
<p id="demo"></p>

<script>
try {
  decodeURI("%%%");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Properti Objek Kesalahan Non-Standar

Mozilla dan Microsoft mendefinisikan beberapa properti objek kesalahan non-standar, seperti dibawah ini:

fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)

Jangan gunakan properti ini di situs web publik. Karena tidak akan bekerja di semua browser.

javascript

Errors di JavaScript: Cara Mengatasi dan Contoh Codenya

Kesalahan Akan Terjadi!

Try dan Catch JavaScript

JavaScript Throws Error

Statement throw

Contoh Validasi Input

HTML Validation

Pernyataan finally

Objek Kesalahan

Properti Objek Kesalahan

Nilai dari Nama Kesalahan

Eval Error

Range Error

Reference Error

Syntax Error

Type Error

Kesalahan URI (Uniform Resource Identifier)

Properti Objek Kesalahan Non-Standar

RegExp di JavaScript: Cara dan Contoh Codenya

Strict Mode di JS: Cara dan Contoh Codenya

You may also like