Ups, saya melakukannya lagi: Men-debug kesalahan umum di JavaScript

Ups, saya melakukannya lagi: Men-debug kesalahan umum di JavaScript

Menulis kode JavaScript bisa jadi menantang dan terkadang menakutkan, seperti yang sudah diketahui oleh banyak pengembang. Dalam proses kerja, kesalahan pasti muncul, dan beberapa di antaranya sering terulang. Artikel ini, ditujukan untuk pengembang pemula, membahas tentang kesalahan ini dan cara mengatasinya. Untuk lebih jelasnya diambil nama fungsi, properti dan objeknya lagu populer. Semua ini membantu Anda dengan cepat mengingat cara memperbaiki kesalahan umum.

Kami mengingatkan: untuk semua pembaca "Habr" - diskon 10 rubel saat mendaftar di kursus Skillbox apa pun menggunakan kode promosi "Habr".

Skillbox merekomendasikan: Tentu saja praktis "Pengembang Seluler PRO".

TypeError: properti tidak ditentukan

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

Contoh kode di atas menampilkan kesalahan Uncaught TypeError: Cannot read property 'lucky' of unfined. Masalahnya adalah objek gadis tersebut tidak memiliki properti bernama, meskipun objek tersebut memiliki properti nama. Dan karena properti girl.named tidak ditentukan, Anda tidak dapat mengaksesnya, karena secara formal properti tersebut tidak ada. Tetapi jika Anda mengganti girl.named.lucky dengan girl.name, maka semuanya akan berfungsi dan program akan mengembalikan Lucky.

Anda dapat mempelajari lebih lanjut tentang propertinya baca di sini.

Cara mengatasi TypeErrors

TypeErrors terjadi ketika seorang programmer mencoba melakukan tindakan pada data yang tidak cocok dengan tipe tertentu. Contohnya termasuk menggunakan .bold(), meminta properti yang tidak ditentukan, atau memanggil fungsi yang sebenarnya bukan fungsi.

Jadi, jika Anda mencoba memanggil girl(), Anda akan mendapatkan error Uncaught TypeError: yourVariable.bold is not a function dan girl is not a function, karena sebenarnya yang dipanggil adalah objek, bukan fungsi.

Untuk menghilangkan kesalahan, Anda perlu mempelajari variabelnya. Jadi, apa itu perempuan? Apa nama gadis itu? Anda dapat mengetahuinya dengan menganalisis kode, menampilkan variabel menggunakan console.log, perintah debugger, atau memanggil nama variabel di konsol. Anda perlu memastikan bahwa dimungkinkan untuk mengoperasikan tipe data yang terdapat dalam variabel. Jika tidak cocok, ubah, misalnya, tambahkan kondisi atau blok try..catch - dan dapatkan kendali atas pelaksanaan operasi.

Luapan tumpukan

Kalau percaya dengan penulis lirik lagu Baby One More Time (ini Britney Spears ya), maka kata hit dalam konteks ini berarti keinginan penyanyi untuk dipanggil lagi (berikut penjelasan konteksnya). lagu - catatan penerjemah). Bisa jadi keinginan ini akan menyebabkan peningkatan jumlah panggilan di kehidupan nyata. Namun dalam pemrograman, ini adalah rekursi yang dapat menyebabkan kesalahan jika tumpukan panggilan meluap.

Kesalahannya terlihat seperti ini:

Kesalahan: Ruang tumpukan habis (Edge)
InternalError: terlalu banyak rekursi (Firefox)
RangeError: Ukuran tumpukan panggilan maksimum terlampaui (Chrome)

Stack overflow terjadi jika pengembang tidak mempertimbangkan kasus dasar dalam rekursi, atau jika kode tidak mengatasi kasus yang dimaksud.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

Dalam hal ini, stillBelieve tidak akan pernah salah, jadi oneMoreTime akan dipanggil setiap kali, namun fungsinya tidak akan pernah selesai.

Jika Anda mulai mengandalkan dua teman, ini akan mengurangi rasa kesepian dan Anda tidak perlu menunggu panggilan.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

Contohnya adalah kasus dengan loop tak terbatas, ketika sistem tidak menghasilkan pesan kesalahan, tetapi halaman tempat kode JavaScript dijalankan terhenti begitu saja. Hal ini terjadi jika perulangan while tidak memiliki kondisi terminasi.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

Anda dapat mengatasi masalah tersebut sebagai berikut:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

Men-debug loop dan rekursi tak terbatas

Jika Anda mengalami masalah loop tak terbatas, Anda harus menutup tab di Chrome atau Edge, dan menutup jendela browser di Firefox. Setelah ini, Anda perlu menganalisis kodenya dengan cermat. Jika Anda tidak dapat menemukan masalahnya, ada baiknya menambahkan perintah debugger ke loop atau fungsi Anda dan memeriksa nilai variabel. Jika hasilnya tidak sesuai dengan yang diharapkan, maka kita ganti, hal ini bisa dilakukan dengan mudah.

Pada contoh di atas, debugger harus ditambahkan sebagai baris pertama dari fungsi atau loop. Kemudian Anda perlu membuka tab debug di Chrome, menganalisis variabel dalam cakupannya. Dengan menggunakan tombol berikutnya Anda dapat melacak perubahannya pada setiap iterasi. Semua ini mudah dilakukan, dan dalam banyak kasus masalahnya terpecahkan.

Anda dapat membaca lebih lanjut tentang semua ini di sini (untuk Chrome) dan di sini (untuk Firefox).

Kesalahan sintaks

Salah satu kesalahan paling umum dalam JavaScript adalah SyntaxError. Ekstensi editor teks akan membantu Anda menghindarinya. Misalnya, Bracket Pair Colorizer menandai tanda kurung dalam kode dengan warna berbeda, dan Prettier atau alat analisis serupa memungkinkan untuk menemukan kesalahan dengan cepat. Pilihan terbaik untuk mengurangi kemungkinan SyntaxError adalah sarang minimal.

Bagikan di komentar: apa yang Anda lakukan untuk mencegah kesalahan atau dengan cepat mendeteksi dan menghilangkannya?

Skillbox merekomendasikan:

Sumber: www.habr.com

Tambah komentar