🥇Oops, I did it again: отстраняване на често срещани грешки в JavaScript

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

Напомняме: за всички читатели на "Хабра" — отстъпка от 10 000 рубли при записване на всякакъв курс на Skillbox с промокод "Хабр".
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, въпреки че има свойство 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 в цикъла или функцията и да проверите стойността на променливите. Ако резултатът не съответства на очакваното, заменете, това може да стане лесно.

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

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

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

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

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

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

Двугодишен практически курс «Аз съм уеб разработчик PRO».

Онлайн курс «С# разработчик от 0».

Практически годишен курс «PHP разработчик от 0 до PRO».

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