Ups, mən bunu yenidən etdim: JavaScript-də ümumi xətaların aradan qaldırılması

JavaScript kodunun yazılması çətin və bəzən açıq-aydın qorxuducu ola bilər, çünki bir çox tərtibatçı tanışdır. İş prosesində istər-istəməz səhvlər yaranır və bəziləri tez-tez təkrarlanır. Təcrübəsiz tərtibatçılara yönəlmiş bu məqalə bu səhvlər və onları necə həll etmək barədə danışır. Aydınlıq üçün funksiyaların, xassələrin və obyektlərin adları buradan götürülür məşhur mahnı. Bütün bunlar ümumi səhvləri necə düzəltməyi tez xatırlamağa kömək edir.

Xatırladırıq: "Habr" ın bütün oxucuları üçün - "Habr" promosyon kodundan istifadə edərək hər hansı bir Skillbox kursuna yazılarkən 10 000 rubl endirim.

Skillbox tövsiyə edir: Praktik kurs "Mobil Developer PRO".

TypeError: xüsusiyyət müəyyən edilməyib

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)

Yuxarıdakı misal kod Uncaught TypeError xətasını verir: Undefined xüsusiyyətinin 'şanslı' xüsusiyyətini oxumaq mümkün deyil. Problem ondadır ki, qız obyektinin ad xassəsi olsa da, onun adlandırılmış xassəsi yoxdur. Və girl.namemed mülkiyyəti müəyyən edilmədiyi üçün ona daxil ola bilməzsiniz, çünki formal olaraq mövcud deyil. Amma girl.namemed.lucky-ni girl.name ilə əvəz etsəniz, o zaman hər şey işləyəcək və proqram Lucky qaytaracaq.

Xüsusiyyətləri haqqında daha çox məlumat əldə edə bilərsiniz bura oxuyun.

TypeErrors-u necə həll etmək olar

TypeErrors, proqramçı müəyyən bir növə uyğun gəlməyən məlumatlar üzərində hərəkətlər etməyə çalışdıqda baş verir. Nümunələrə .bold() funksiyasından istifadə etmək, qeyri-müəyyən xassə tələb etmək və ya əslində funksiya olmayan funksiyanı çağırmaq daxildir.

Beləliklə, siz girl() funksiyasına zəng etməyə çalışsanız, Uncaught TypeError xətası alacaqsınız: yourVariable.bold funksiya deyil və qız funksiya deyil, çünki o, əslində funksiya deyil, çağırılan obyektdir.

Səhvləri aradan qaldırmaq üçün dəyişənləri öyrənmək lazımdır. Yaxşı, qız nədir? girl.name nədir? Siz kodu təhlil etməklə, console.log saytından istifadə edərək dəyişənləri göstərməklə, sazlama əmrindən istifadə etməklə və ya konsolda dəyişən adına zəng etməklə öyrənə bilərsiniz. Dəyişəndə ​​olan məlumat növü ilə işləməyin mümkün olduğuna əmin olmalısınız. Əgər uyğun gəlmirsə, onu dəyişdirin, məsələn, şərt əlavə edin və ya cəhd edin..tutmaq bloku - və əməliyyatın icrasına nəzarəti əldə edin.

Yığın daşması

Baby One More Time mahnısının sözlərinin müəlliflərinə inanırsınızsa (bu, Britni Spirsdir, bəli), o zaman bu kontekstdə hit sözü müğənninin yenidən çağırılmaq istəyi deməkdir (burada mahnının kontekstinin izahı var. mahnı - tərcüməçinin qeydi). Ola bilər ki, bu istək real həyatda zənglərin sayının artmasına səbəb olsun. Lakin proqramlaşdırmada bu, zəng yığını daşdıqda xətaya səbəb ola biləcək bir rekursiyadır.

Səhvlər belə görünür:

Xəta: yığın yeri yoxdur (Kənar)
Daxili xəta: həddən artıq rekursiya (Firefox)
RangeError: Maksimum zəng yığınının ölçüsü keçdi (Chrome)

Tərtibatçı rekursiyada əsas halı nəzərə almadıqda və ya kod nəzərdə tutulan işə müraciət etmədikdə yığın daşması baş verir.

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

Bu halda stillBelieve heç vaxt yalan ola bilməz, ona görə də hər dəfə oneMoreTime çağırılacaq, lakin funksiya heç vaxt tamamlanmayacaq.

İki dosta güvənməyə başlasanız, bu, təkliyi azaldacaq və zəng gözləmək məcburiyyətində qalmayacaqsınız.

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

Buna misal olaraq, sistem səhv mesajı yaratmayan, lakin JavaScript kodunun icra olunduğu səhifə sadəcə dondurulduğu zaman sonsuz döngələri olan halları göstərmək olar. Bu, while dövrəsində sonlanma şərti olmadıqda baş verir.

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

Problemi aşağıdakı kimi həll edə bilərsiniz:

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

Sonsuz döngələrin və rekursiyaların sazlanması

Sonsuz döngə probleminiz varsa, Chrome və ya Edge-də nişanı bağlamalı və Firefox-da brauzer pəncərəsini bağlamalısınız. Bundan sonra kodu diqqətlə təhlil etməlisiniz. Problemi tapa bilmirsinizsə, döngə və ya funksiyanıza sazlama əmri əlavə etməyə və dəyişənlərin dəyərlərini yoxlamağa dəyər. Nəticə gözlənilə uyğun gəlmirsə, onu əvəz edirik, bu asanlıqla edilə bilər.

Yuxarıdakı misalda sazlayıcı funksiyanın və ya döngənin ilk sətri kimi əlavə edilməlidir. Sonra, əhatə dairəsində dəyişənləri təhlil edərək, Chrome-da sazlama sekmesini açmalısınız. Növbəti düymədən istifadə edərək, hər iterasiya ilə onların dəyişikliklərini izləyə bilərsiniz. Bütün bunları etmək asandır və əksər hallarda problem tapılır.

Bütün bunlar haqqında daha ətraflı burada oxuya bilərsiniz (xrom üçün) və burada (Firefox üçün).

Söz düzümü səhvi

JavaScript-də ən çox yayılmış səhvlərdən biri SyntaxError-dur. Mətn redaktoru genişləndirmələri onlardan qaçmağa kömək edəcək. Məsələn, Bracket Pair Colorizer koddakı mötərizələri müxtəlif rənglərlə qeyd edir və Prettier və ya oxşar analiz aləti səhvləri tez tapmağa imkan verir. SyntaxError ehtimalını azaltmaq üçün ən yaxşı seçim minimal yerləşdirmədir.

Şərhlərdə paylaşın: səhvlərin qarşısını almaq və ya onları tez aşkar edib aradan qaldırmaq üçün nə edirsiniz?

Skillbox tövsiyə edir:

• İki illik praktik kurs "Mən PRO veb tərtibatçısıyam".
• Onlayn kurs "0-dan C# tərtibçisi".
• Praktiki il kursu "PHP tərtibçisi 0-dan PRO".

Mənbə: www.habr.com