5 Penyebab Umum Kesalahan JavaScript (dan Cara Menghindarinya)

JavaScript (JS) adalah bahasa pemrograman di mana-mana, fleksibel, dan populer — meskipun bahasa ini juga rentan terhadap kesalahan dan bug yang membuat sebagian besar pengembang cemberut dan panik.


JS digunakan secara luas untuk memperkuat interaktivitas pengguna di sisi klien pada sebagian besar aplikasi web. Tanpa JavaScript, mungkin hal-hal di web bisa mati dan tidak menstimulasi. Meskipun demikian, pasang surut bahasa terkadang membuat pengembang memiliki hubungan cinta-benci dengannya.

Kesalahan JavaScript menyebabkan aplikasi menghasilkan hasil yang tidak terduga dan membahayakan pengalaman pengguna. Baru baru ini belajar oleh University of British Columbia (UBC) berusaha mencari tahu akar penyebab dan dampak kesalahan JavaScript dan bug. Hasil penelitian ini menemukan beberapa pola umum yang mengganggu kinerja program JS.

Berikut adalah diagram lingkaran yang menunjukkan apa yang ditemukan para peneliti:

Dalam posting blog ini, kami akan mengilustrasikan beberapa penyebab umum kesalahan JavaScript yang disorot dalam penelitian ini (ditambah yang lainnya yang kami temui setiap hari) dan bagaimana membuat aplikasi Anda lebih rentan terhadap kegagalan..

Terkait DOM

Document Object Model (DOM) memainkan peran penting dalam interaktivitas situs web. Antarmuka DOM memungkinkan konten, gaya, dan struktur halaman web untuk dimanipulasi. Membuat halaman web HTML biasa interaktif — atau memanipulasi DOM — adalah alasan utama mengapa bahasa pemrograman JavaScript dirilis.

Jadi, bahkan dengan diperkenalkannya teknologi JavaScript backend seperti Node.js, bekerja dengan DOM masih merupakan bagian besar dari apa yang dilakukan bahasa. Oleh karena itu, DOM adalah jalan yang signifikan untuk memperkenalkan bug dan kesalahan dalam aplikasi JavaScript.

Tidak mengherankan bahwa studi laporan bug JavaScript menemukan bahwa masalah terkait DOM bertanggung jawab atas sebagian besar kekurangan, yaitu 68%.

Misalnya, beberapa pemrogram JavaScript umumnya membuat kesalahan dengan mereferensikan elemen DOM sebelum dimuat, yang mengarah ke kesalahan kode.

document.getElementById ("wadah") .innerHTML = "Bug dan Kesalahan JS Umum";

Jika kode di atas dijalankan di browser Chrome, itu akan menimbulkan kesalahan, yang bisa dilihat di konsol pengembang:

Kesalahan dilemparkan karena kode JavaScript biasanya dijalankan sesuai dengan urutan yang muncul pada dokumen. Dengan demikian, browser tidak mengetahui elemen yang dirujuk ketika kode berjalan.

Untuk mengatasi masalah seperti itu, Anda bisa memanfaatkan berbagai pendekatan. Metode paling sederhana adalah menempatkan sebelum tag skrip. Anda juga dapat menggunakan perpustakaan JavaScript seperti jQuery untuk memastikan bahwa DOM dimuat terlebih dahulu sebelum dapat diakses.

document.getElementById ("wadah") .innerHTML = "Bug dan Kesalahan JS Umum";

Berbasis sintaksis

Kesalahan sintaksis terjadi ketika penerjemah JavaScript gagal menjalankan kode yang secara sintaksis salah. Jika membuat aplikasi dan juru bahasa mengamati token yang tidak cocok dengan sintaks standar bahasa pemrograman JavaScript, itu akan menimbulkan kesalahan. Menurut penelitian laporan bug JavaScript, kesalahan tersebut bertanggung jawab untuk 12% dari semua kesalahan dalam bahasa.

Kesalahan tata bahasa, seperti tanda kurung yang hilang atau tanda kurung yang tidak cocok, adalah penyebab utama kesalahan sintaksis dalam JavaScript.

Misalnya, ketika Anda harus menggunakan pernyataan kondisional untuk mengatasi beberapa kondisi, Anda mungkin kehilangan memberikan tanda kurung seperti yang diperlukan, yang mengarah ke cacat sintaksis.

Mari kita lihat contoh berikut ini.

jika ((x > y) && (y < 77) {
// lebih banyak kode di sini
}

Ya, tanda kurung terakhir dari pernyataan kondisional tidak ada. Apakah Anda memperhatikan kesalahan dengan kode di atas?

Mari kita perbaiki.

jika ((x > y) && (y < 77)) {
// lebih banyak kode di sini
}

Untuk menghindari kesalahan sintaksis seperti itu, Anda harus menghabiskan waktu mempelajari aturan tata bahasa dari bahasa pemrograman JavaScript. Dengan praktik pengkodean yang luas, Anda dapat mengenali kesalahan tata bahasa dengan mudah dan menghindari mengirimkannya dengan aplikasi yang dikembangkan.

Penggunaan kata kunci tidak terdefinisi / null tidak benar

Beberapa pengembang JavaScript tidak tahu cara menggunakan tidak terdefinisi dan batal kata kunci dengan benar. Faktanya, penelitian ini melaporkan bahwa penggunaan kata kunci yang tidak tepat menyumbang 5% dari semua bug JavaScript.

Itu batal kata kunci adalah nilai penugasan, yang biasanya ditugaskan ke variabel untuk menunjukkan nilai yang tidak ada. Heran, batal juga merupakan objek JavaScript.

Berikut ini sebuah contoh:

var codeJS = null;

console.log (codeJS);
// output adalah nol

console.log (typeof codeJS);
// output adalah objek

Di samping itu, tidak terdefinisi menunjukkan bahwa variabel atau properti lainnya, yang telah dideklarasikan, tidak memiliki nilai yang ditetapkan. Ini juga dapat menyiratkan bahwa tidak ada yang dinyatakan. tidak terdefinisi adalah tipe dari dirinya sendiri.

Berikut ini sebuah contoh:

var codeJS;

console.log (codeJS);
// output tidak terdefinisi

console.log (typeof codeJS);
// output tidak terdefinisi

Menariknya, jika operator kesetaraan dan operator identitas digunakan untuk membandingkan batal dan tidak terdefinisi kata kunci, yang terakhir tidak menganggapnya sama.

console.log (null == undefined);
// output benar

console.log (null === tidak terdefinisi);
// output salah

Oleh karena itu, mengetahui penggunaan yang benar dari batal dan tidak terdefinisi kata kunci dapat membantu Anda menghindari pengenalan bug dalam program JavaScript Anda.

Metode yang tidak ditentukan

Penyebab umum lain bug dalam JavaScript adalah melakukan panggilan ke metode tanpa memberikan definisi sebelumnya. Peneliti UBC menemukan bahwa kesalahan ini menyebabkan 4% dari semua kesalahan JavaScript.

Berikut ini sebuah contoh:

var coder = {
nama: "Peter",
usia: 27,
berbicara () {
console.log (this.name);
}
};
coder.speakNow ();

Berikut adalah kesalahan yang terlihat di konsol pengembang Chrome:

Kesalahan di atas terjadi karena fungsi yang dipanggil, speakNow (), belum didefinisikan dalam kode JavaScript.

Penggunaan pernyataan pengembalian yang tidak tepat

Dalam JavaScript, the kembali pernyataan digunakan untuk menghentikan jalannya suatu fungsi sehingga nilainya dapat dikeluarkan. Jika digunakan secara keliru, pernyataan pengembalian dapat mengganggu kinerja optimal aplikasi. Menurut penelitian, penggunaan pernyataan pengembalian yang salah menyebabkan 2% dari semua bug dalam aplikasi JavaScript.

Sebagai contoh, beberapa programmer JavaScript biasanya membuat kesalahan dengan melanggar pernyataan pengembalian dengan salah.

Meskipun Anda dapat memecah pernyataan JavaScript dalam dua baris dan masih mendapatkan output yang diperlukan, memecah pernyataan kembali mengundang bencana ke dalam aplikasi Anda.

Berikut ini sebuah contoh:

nomor fungsi (n) {
var add = 5;
kembali;
n + tambahkan;
}
console.log (nomor (10));

Saat kode di atas dijalankan, kesalahan yang tidak ditentukan terlihat di konsol pengembang Chrome:

Karena itu, Anda harus berhenti dari melanggar kembali pernyataan dalam kode JavaScript Anda.

Kesimpulan

Bahasa pemrograman JavaScript sisi klien hadir dengan kemampuan luas yang sangat baik untuk memberi daya pada fungsionalitas aplikasi web modern. Namun, jika Anda tidak memahami keanehan yang membuat bahasa berfungsi, kinerja aplikasi Anda bisa lumpuh.

Selanjutnya, Pengembang JavaScript membutuhkan alat serbaguna untuk memecahkan masalah kinerja aplikasi mereka dan mendeteksi bug dan kesalahan dengan cepat.

Oleh karena itu, dengan serangkaian alat pengujian yang komprehensif, Anda dapat dengan yakin mengidentifikasi anomali yang mengganggu kinerja situs web Anda. Inilah yang Anda butuhkan untuk meningkatkan kinerja situs Anda dan mencapai pengalaman pengguna yang optimal.

Selamat pemrograman JavaScript bebas kesalahan!

Artikel ditulis oleh Alfrick Opidi

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map