Эти сообщения об ошибках выдаются, когда вы нарушаете правила синтаксиса языка JavaScript. Давайте рассмотрим распространенные причины синтаксических ошибок:

  1. Отсутствующие/несовпадающие круглые скобки и фигурные скобки
  2. Опуск точек с запятой (не всегда требуется, но может произойти ошибка).
  3. Ключевые слова/переменные с ошибками в написании
  4. Использование зарезервированных слов (присвоение значения «if»)

Вы можете интерпретировать синтаксическую ошибку, разбив сообщение:

Uncaught SyntaxError: Unexpected token ‘;’
 at myScript.js:3:15

Вот что мы знаем:

  • Uncaught SyntaxError — тип ошибки.
  • Неожиданный токен:показывает неожиданный токен. В данном случае это точка с запятой, но также может быть «)» или «}».
  • В myScript.js:3:15:указывает, где находится ошибка. Он находится в строке 3, столбце 15 файла myscript.js.

Рассмотрите возможность использования таких инструментов, как расширение ESLint, чтобы предотвратить ошибки. Имейте в виду, что ESLint статичен — он анализирует код, не запуская его.

Примите синтаксические ошибки. В долгосрочной перспективе они сделают вас более опытным программистом.

Ошибки ссылок: неразрешенные переменные и область действия

Ошибки ссылок возникают при доступе к несуществующей переменной/свойству. Вы можете подумать: Не существует? как? Оно прямо здесь!» Это момент разочарования, который может быть как сбивающим с толку, так и поучительным.

Вот пример, с которым вы можете столкнуться:

Uncaught ReferenceError: myVariable is not defined at myScript.js:3:9

Давайте раскроем это немного подробнее.

  • Uncaught ReferenceError:Этот тип ошибки указывает на то, что вы используете что-то, что JavaScript не распознает в текущем контексте.
  • myVariable не определена:Сообщение об ошибке указывает на проблему — в данном случае неуловимую «myVariable».
  • myScript.js:3:9: Эти координаты указывают точное местоположение ошибки: строка 3, столбец 9 файла myscript.js.

Достаточно легко, правда?

Вроде, как бы, что-то вроде. Теперь вы знаете, что вызывает проблемы в вашем коде. Но как это исправить?

Осмотр цепочки объема: следуйте подсказкам. Проследите путь переменной до ее текущего местоположения. Действительно ли он доступен в этой области или принадлежит более высокой области?

Внутри функции. Является ли переменная объявленной внутри этой функции или в более высокой области видимости? Переменные, объявленные внутри функций, недоступны за пределами этих функций, если только переменная не объявлена ​​без «const», «let» или «var». тогда оно неявно глобально.

Проверка блока. Аналогичные правила применяются к таким блокам, как «if», « while» или «for». Переменные, находящиеся в блоках, остаются заблокированными внутри них.

Будьте уникальными. То есть ваши соглашения об именах. Имеют ли параметры вашей функции или ее локальные переменные те же имена, что и переменные во внешних областях? Сохранение различий в именах снижает риск неожиданных ошибок ссылок.

Союзники в ошибках. Помните, что сообщения об ошибках являются вашими друзьями? Ну, как и ведение журнала консоли. Добавьте операторы console.log() до и после рассматриваемой строки. Вы можете увидеть состояние переменных, приведших к ошибке.

Спаситель. Инструменты линтинга (еще раз спасибо расширению ESLint) могут помочь обнаружить проблемы, связанные с областью действия.

Попрактиковавшись, вы научитесь разгадывать загадки ссылочных ошибок.

Ошибки типа: путаница JavaScript с неподходящими данными

Типовые ошибки возникают, когда вы должны использовать определенный тип информации для задачи, но в конечном итоге вы используете другой тип информации, который не работает правильно для этой задачи. Квадратный колышек, круглое отверстие. Пытаетесь умножить число на строку? Ну, как и ваше последнее неудачное свидание, они не в вкусе друг друга. За исключением того, что JavaScript легко подведет вас из-за ошибки типа. Это касается и массивов. Различные типы массивов несовместимы. Их нельзя совмещать.

Рассмотрим этот сценарий:

let numArr = [1,2,3,4];
let text = "5"
let totalNum = numArr.concat(text);

Исход? «Ошибка типа: Numbers.concat не является функцией». Массивы разных типов просто отказываются объединяться.

Неназначенные переменные также приводят к ошибкам типов. В этом примере переменная объявлена, но не назначена:

let name;
let lastName= "Johnson"
let fullName = name + lastName
TypeError: Cannot read property 'valueOf' of undefined.

Когда вы потратите время, чтобы понять и разобрать приведенную выше ошибку, вы поймете: переменная fullName имеет только строку, присвоенную части выражения. Имя переменной остается неопределенным и загадочным. Ошибка оправдана — мы не можем суммировать (+) неизвестное.

Другая причина ошибок этого типа может быть связана с функцией. Вы вызываете функцию из нефункции? Это все равно, что пытаться позвонить тому, у кого нет телефона. В терминах JavaScript это означает вызов функции для несовместимых данных:

let phoneGreeting = "Hello!";
phoneGreeting();
“Please leave your message after the tone. TypeError: phoneGreeting is not a function.”

Помните, что ошибки типов — это ваши ориентиры в мире совместимости типов данных. Восприняв эти ошибки как возможность понять и соблюдать правила типов данных JavaScript, вы получите более глубокое понимание того, как работать с различными типами информации.

Ошибки диапазона: выход за пределы

RangeErrors — это способ JavaScript сообщить вам, что ваш код работает со значениями, превышающими те, которые он может обработать. Есть несколько примеров, которые было бы полезно рассмотреть здесь:

Если у вас есть массив чисел:

const numbers = [1,2,3,5]
console.log(numbers[7])

В этом фрагменте вы пытаетесь получить доступ к числу по 7-му индексу массива «numbers». Однако массив имеет индексы только от 0 до 3 (поскольку массивы имеют нулевой индекс), что приводит к сообщению об ошибке, например:

RangeError: Invalid array index at :2:17

Стоит отметить, что отрицательные индексы также вызывают ошибки RangeErrors. Помните, индексы начинаются с 0, поэтому отрицательный индекс недействителен. Мне это казалось очевидным, пока я не осознал, что Python позволяет использовать отрицательную индексацию для доступа к элементам с конца массива. JavaScript не поддерживает эту функцию.

RangeErrors также часто возникают в сценариях, связанных со стеком вызовов, который отслеживает вызовы функций во время выполнения программы. Распространенным явлением является ошибка Превышен максимальный размер стека вызовов, часто вызванная рекурсивным вызовом функции без надлежащего завершения. Это может привести к перегрузке JavaScript, поскольку выдача RangeError сопровождается сообщением максимальный стек вызовов. Выявление этой проблемы побуждает к дальнейшему исследованию условий прекращения как потенциального решения.

Самый важный вывод заключается в том, что RangeErrors — это ограждения, которые предупреждают вас, когда ваш код выходит за границы.

Итак, в следующий раз, когда вы столкнетесь с потоком сообщений об ошибках в консоли, помните, что каждое сообщение — это подсказка, ведущая вас ближе к сокровищу. Ознакомьтесь с действиями, которые необходимо предпринять для понимания сообщения об ошибке и способов диагностики проблемы. Это контрольные точки на вашем пути к тому, чтобы стать опытным специалистом по обнаружению ошибок JavaScript! С каждой устраненной вами ошибкой вы приближаетесь к мастерству, превращая даже самые разочаровывающие понедельники в полезные победы. Приятного кодирования!

Искренне,

Молли Тодд