Ами сега, направих го отново: отстраняване на често срещани грешки в JavaScript

Писането на JavaScript код може да бъде предизвикателство и понякога направо смущаващо, както са запознати с много разработчици. В процеса на работа неизбежно възникват грешки, а някои от тях се повтарят често. Тази статия, насочена към начинаещи разработчици, говори за тези грешки и как да ги разрешите. За по-голяма яснота имената на функциите, свойствата и обектите са взети от популярна песен. Всичко това ви помага бързо да запомните как да коригирате често срещаните грешки.

Напомняме ви: за всички читатели на "Habr" - отстъпка от 10 000 рубли при записване във всеки курс Skillbox, използвайки промоционалния код на "Habr".

Skillbox препоръчва: Практически курс „Мобилен разработчик PRO“.

TypeError: свойството не е дефинирано

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)

Примерният код по-горе извежда грешката Uncaught TypeError: Cannot read property 'lucky' of undefined. Проблемът е, че обектът момиче няма свойство с име, въпреки че има свойство с име. И тъй като свойството girl.named не е дефинирано, нямате достъп до него, защото формално то не съществува. Но ако замените girl.named.lucky с girl.name, тогава всичко ще работи и програмата ще върне Lucky.

Можете да научите повече за имотите прочетете тук.

Как да разрешите TypeErrors

TypeErrors възникват, когато програмист се опита да извърши действия върху данни, които не съответстват на определен тип. Примерите включват използване на .bold(), запитване за недефинирано свойство или извикване на функция, която всъщност не е функция.

Така че, ако се опитате да извикате girl(), ще получите грешката Uncaught TypeError: yourVariable.bold не е функция и girl не е функция, защото всъщност е обект, който се извиква, а не функция.

За да елиминирате грешките, трябва да проучите променливите. И така, какво е момиче? Какво е girl.named? Можете да разберете, като анализирате кода, показвате променливи с помощта на console.log, командата за отстраняване на грешки или извиквате името на променливата в конзолата. Трябва да се уверите, че е възможно да работите с типа данни, съдържащ се в променливата. Ако не пасва, променете го, например добавете условие или try..catch блок - и получете контрол върху изпълнението на операцията.

Препълване на стека

Ако се вярва на авторите на текста на песента Baby One More Time (това е Бритни Спиърс, да), то думата хит в този контекст означава желанието на певицата да бъде извикана отново (ето обяснение на самия контекст на песен - бележка на преводача). Възможно е това желание да доведе до увеличаване на броя на обажданията в реалния живот. Но в програмирането това е рекурсия, която може да причини грешка, ако стекът за повиквания препълни.

Грешките изглеждат така:

Грешка: Няма място в стека (Edge)
InternalError: твърде много рекурсия (Firefox)
RangeError: Максималният размер на стека на повикванията е надвишен (Chrome)

Препълване на стека възниква, ако разработчикът не вземе предвид основния случай в рекурсията или ако кодът не адресира предвидения случай.

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

В този случай stillBelieve никога не може да бъде невярно, така че oneMoreTime ще се извиква всеки път, но функцията никога няма да завърши.

Ако започнете да разчитате на двама приятели, това ще намали самотата и няма да се налага да чакате обаждане.

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

Пример са случаи с безкрайни цикли, когато системата не генерира съобщение за грешка, а страницата, на която се изпълнява JavaScript кодът, просто замръзва. Това се случва, ако цикълът while няма условие за прекратяване.

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

Можете да разрешите проблема по следния начин:

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

Отстраняване на грешки при безкрайни цикли и рекурсии

Ако имате проблем с безкраен цикъл, трябва да затворите раздела в Chrome или Edge и да затворите прозореца на браузъра във Firefox. След това трябва внимателно да анализирате кода. Ако не можете да намерите проблема, струва си да добавите команда за отстраняване на грешки към вашия цикъл или функция и да проверите стойностите на променливите. Ако резултатът не отговаря на очакваното, тогава го заменяме, това може да стане лесно.

В горния пример дебъгерът трябва да се добави като първи ред на функцията или цикъла. След това трябва да отворите раздела за отстраняване на грешки в Chrome, като анализирате променливите в обхвата. С помощта на следващия бутон можете да проследите промените им при всяка итерация. Всичко това се прави лесно и в повечето случаи проблемът се открива.

Повече за всичко това можете да прочетете тук (за Chrome) и тук (за Firefox).

Синтактична грешка

Една от най-честите грешки в JavaScript е SyntaxError. Разширенията за текстов редактор ще ви помогнат да ги избегнете. Например, Bracket Pair Colorizer маркира скоби в кода с различни цветове, а Prettier или подобен инструмент за анализ прави възможно бързото намиране на грешки. Най-добрият вариант за намаляване на вероятността от SyntaxError е минимално влагане.

Споделете в коментарите: какво правите, за да предотвратите грешки или бързо да ги откриете и отстраните?

Skillbox препоръчва:

• Двугодишен практически курс „Аз съм PRO уеб разработчик“.
• Онлайн курс „C# разработчик от 0“.
• Практически годишен курс „PHP разработчик от 0 до PRO“.

Източник: www.habr.com