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