Опа, свърших го отново: отстраняване на разпространени грешки в JavaScript

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

Напомняме: за всички читатели на «Хабра» — отстъпка от 10 000 рубли при записване на всеки курс Skillbox с промокод «Хабр».

Skillbox препоръчва: Практически курс «Мобилен разработчик ПРО».

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: Не може да се прочете свойството 'lucky' на не определено. Проблемът е, че обектът girl няма свойство named, въпреки че има свойство name. И тъй като свойството girl.named не е определено, не може да се получи достъп до него, тъй като формално то не съществува. Но ако замените girl.named.lucky с girl.name, всичко ще заработи и програмата ще върне Lucky.

Повече за свойствата можете да прочетете тук.

Методи за отстраняване на грешки TypeError

Грешките TypeError се появяват, когато програмистът се опитва да извърши действия с данни, които не съответстват на определен тип. Например, може да се опитате да приложите .bold(), да запитате свойство undefined или да извикате функция, която всъщност не е функция.

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

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

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

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

Грешките изглеждат по следния начин:

Error: Out of stack space (Edge)
InternalError: too much recursion (Firefox)
RangeError: Maximum call stack size exceeded (Chrome)

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

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

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

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

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 - прозореца на браузера. След това трябва внимателно да анализирате кода. Ако не успеете да намерите проблема, си струва да добавите команда debugger в цикъла или функцията и да проверите стойността на променливите. Ако резултатът не отговаря на очакванията, заменете го, това може да стане лесно.

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

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

Грешка в синтаксиса

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

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

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

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

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