- PVSM.RU - https://www.pvsm.ru -
Порой написание кода JavaScript дается сложно, а иногда и просто пугает, что знакомо многим разработчикам. В процессе работы неизбежно возникают ошибки, причем некоторые из них повторяются частенько. В статье, рассчитанной на начинающих разработчиков, рассказывается об этих ошибках и способах их решения. Для наглядности названия функций, свойств и объектов взяты из популярной песни [1]. Все это помогает быстро запомнить, как исправлять распространенные ошибки.
Напоминаем: для всех читателей «Хабра» — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».
Skillbox рекомендует: Практический курс «Мобильный разработчик PRO» [2].
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.
Подробнее о свойствах можно почитать здесь [3].
Ошибки 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 [4]) и здесь (для Firefox [5]).
Одна из наиболее распространенных ошибок в JavaScript — SyntaxError. Избежать их помогут расширения текстового редактора. Так, Bracket Pair Colorizer отмечает скобки в коде разными цветами, а Prettier или похожий инструмент анализа дает возможность быстро найти ошибки. Лучший вариант, чтобы снизить вероятность появления SyntaxError — минимальная вложенность.
Поделитесь в комментариях: что вы делаете для того, чтобы не допускать ошибок или быстро обнаруживать и ликвидировать их?
Skillbox рекомендует:
- Двухлетний практический курс «Я — веб-разработчик PRO» [6].
- Онлайн-курс «С#-разработчик с 0» [7].
- Практический годовой курс «PHP-разработчик с 0 до PRO» [8].
Автор: fokus-lop
Источник [9]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/316228
Ссылки в тексте:
[1] популярной песни: https://genius.com/Britney-spears-lucky-lyrics
[2] «Мобильный разработчик PRO»: https://skillbox.ru/agima/?utm_source=skillbox.media&utm_medium=habr.com&utm_campaign=AGIMA&utm_content=articles&utm_term=oops
[3] почитать здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
[4] для Chrome: https://developers.google.com/web/tools/chrome-devtools/javascript/
[5] для Firefox: https://developer.mozilla.org/en-US/docs/Tools/Debugger
[6] «Я — веб-разработчик PRO»: https://iamwebdev.skillbox.ru/?utm_source=skillbox.media&utm_medium=habr.com&utm_campaign=WEBDEVPRO&utm_content=articles&utm_term=oops
[7] «С#-разработчик с 0»: https://skillbox.ru/c-sharp/?utm_source=skillbox.media&utm_medium=habr.com&utm_campaign=CSHDEV&utm_content=articles&utm_term=oops
[8] «PHP-разработчик с 0 до PRO»: https://skillbox.ru/php/?utm_source=skillbox.media&utm_medium=habr.com&utm_campaign=PHPDEV&utm_content=articles&utm_term=oops
[9] Источник: https://habr.com/ru/post/450194/?utm_campaign=450194
Нажмите здесь для печати.