Hata, yine yaptım: JavaScript'te sık karşılaşılan hatalarda hata ayıklama

Birçok geliştiricinin aşina olduğu gibi, JavaScript kodu yazmak zorlu ve bazen düpedüz korkutucu olabilir. Çalışma sürecinde kaçınılmaz olarak hatalar ortaya çıkar ve bazıları sıklıkla tekrarlanır. Acemi geliştiricilere yönelik bu makale, bu hatalardan ve bunların nasıl çözüleceğinden bahsediyor. Açıklık sağlamak için, işlevlerin, özelliklerin ve nesnelerin adları şuradan alınmıştır: popüler şarkı. Bütün bunlar, yaygın hataları nasıl düzelteceğinizi hızlı bir şekilde hatırlamanıza yardımcı olur.

Hatırlatıyoruz: tüm "Habr" okuyucuları için - "Habr" promosyon kodunu kullanarak herhangi bir Skillbox kursuna kayıt olurken 10 ruble indirim.

Skillbox şunları önerir: pratik kurs "Mobil Geliştirici PRO".

TypeError: özellik tanımlanmadı

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)

Yukarıdaki örnek kod, Uncaught TypeError: UnDefinition'ın 'lucky' özelliği okunamıyor hatasını veriyor. Sorun, kız nesnesinin bir name özelliğine sahip olmasına rağmen, adlandırılmış bir özelliğe sahip olmamasıdır. Ve girl.named özelliği tanımlanmadığından ona erişemezsiniz çünkü resmi olarak mevcut değildir. Ancak girl.named.lucky'yi girl.name ile değiştirirseniz, her şey işe yarayacak ve program Lucky'yi döndürecektir.

Özellikler hakkında daha fazla bilgi edinebilirsiniz Burada okumak.

TypeErrors nasıl çözülür?

TypeErrors, bir programcı belirli bir türle eşleşmeyen veriler üzerinde eylemler gerçekleştirmeye çalıştığında ortaya çıkar. Örnekler arasında .bold() işlevinin kullanılması, tanımsız bir özelliğin istenmesi veya gerçekte işlev olmayan bir işlevin çağrılması yer alır.

Dolayısıyla, girl()'u çağırmayı denerseniz Uncaught TypeError: yourVariable.bold is not a function ve girl is not a function, çünkü o aslında çağrılan bir nesnedir, bir işlev değil.

Hataları ortadan kaldırmak için değişkenleri incelemeniz gerekir. Peki kız nedir? Kızın adı nedir? Kodu analiz ederek, console.log kullanarak değişkenleri görüntüleyerek, hata ayıklayıcı komutunu kullanarak veya konsolda değişken adını çağırarak bunu öğrenebilirsiniz. Değişkenin içerdiği veri türü üzerinde çalışmanın mümkün olduğundan emin olmanız gerekir. Uymuyorsa değiştirin, örneğin bir koşul veya try..catch bloğu ekleyin ve işlemin yürütülmesi üzerinde kontrol sahibi olun.

Yığın taşması

Baby One More Time şarkısının sözlerinin yazarlarına inanıyorsanız (bu Britney Spears, evet), o zaman bu bağlamda hit kelimesi, şarkıcının tekrar çağrılma arzusu anlamına gelir (işte şarkının bağlamının bir açıklaması). şarkı - çevirmenin notu). Bu arzunun gerçek hayatta da arama sayısında artışa yol açması muhtemel. Ancak programlamada bu, çağrı yığınının taşması durumunda hataya neden olabilecek bir özyinelemedir.

Hatalar şöyle görünür:

Hata: Yığın alanı yetersiz (Edge)
InternalError: çok fazla özyineleme (Firefox)
RangeError: Maksimum çağrı yığını boyutu aşıldı (Chrome)

Geliştiricinin özyinelemede temel durumu dikkate almaması veya kodun amaçlanan durumu ele almaması durumunda yığın taşması meydana gelir.

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

Bu durumda stillBelieve hiçbir zaman yanlış olamaz, dolayısıyla her seferinde oneMoreTime çağrılacak, ancak işlev hiçbir zaman tamamlanmayacaktır.

İki arkadaşınıza güvenmeye başlarsanız bu yalnızlığı azaltacak ve bir çağrı beklemek zorunda kalmayacaksınız.

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

Bunun bir örneği, sistemin bir hata mesajı oluşturmadığı, ancak JavaScript kodunun yürütüldüğü sayfanın donduğu sonsuz döngülerin olduğu durumlardır. Bu, while döngüsünün bir sonlandırma koşuluna sahip olmaması durumunda gerçekleşir.

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

Sorunu şu şekilde çözebilirsiniz:

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

Sonsuz döngülerde ve yinelemelerde hata ayıklama

Sonsuz döngü sorunu yaşıyorsanız Chrome veya Edge'de sekmeyi, Firefox'ta ise tarayıcı penceresini kapatmanız gerekir. Bundan sonra kodu dikkatlice analiz etmeniz gerekir. Sorunu bulamıyorsanız döngünüze veya işlevinize bir hata ayıklayıcı komutu ekleyip değişkenlerin değerlerini kontrol etmekte fayda var. Sonuç beklenenle eşleşmiyorsa değiştiririz, bu kolayca yapılabilir.

Yukarıdaki örnekte, fonksiyonun veya döngünün ilk satırı olarak hata ayıklayıcı eklenmelidir. Daha sonra kapsamdaki değişkenleri analiz ederek Chrome'da hata ayıklama sekmesini açmanız gerekir. Sonraki düğmesini kullanarak her yinelemede değişikliklerini takip edebilirsiniz. Bütün bunları yapmak kolaydır ve çoğu durumda sorun bulunur.

Bütün bunlar hakkında daha fazla bilgiyi burada bulabilirsiniz (krom için) ve burada (Firefox için).

Sözdizimi hatası

JavaScript'te en yaygın hatalardan biri SyntaxError'dur. Metin düzenleyici uzantıları bunlardan kaçınmanıza yardımcı olacaktır. Örneğin Braket Çifti Renklendirici, koddaki parantezleri farklı renklerle işaretler ve Prettier veya benzer bir analiz aracı, hataların hızlı bir şekilde bulunmasını mümkün kılar. SyntaxError olasılığını azaltmak için en iyi seçenek minimum iç içe geçmedir.

Yorumlarda paylaşın: Hataları önlemek veya hızlı bir şekilde tespit edip ortadan kaldırmak için ne yapıyorsunuz?

Skillbox şunları önerir:

• İki yıllık uygulamalı kurs "Ben bir PRO web geliştiricisiyim".
• çevrimiçi kurs "0'dan itibaren C# geliştiricisi".
• Uygulamalı yıl kursu "0'dan PRO'ya PHP geliştiricisi".

Kaynak: habr.com