LearnJS

Ошибки в JavaScript и как их читать

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

Для новичка ошибка часто выглядит пугающе: много английского текста, имя файла, номер строки и непонятные слова вроде ReferenceError или TypeError. Но если разбирать сообщение по частям, оно становится полезной подсказкой.

Что такое ошибка в JavaScript

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

Например:

console.log('Привет';

Здесь пропущена закрывающая круглая скобка. Браузер не сможет понять такую запись и покажет ошибку.

Исправленный вариант:

console.log('Привет');

Иногда ошибка останавливает выполнение всего файла, иногда только часть кода. На первых уроках главное научиться открывать консоль и читать хотя бы основную строку сообщения.

Где смотреть ошибки

Ошибки JavaScript отображаются в консоли разработчика. Откройте страницу в браузере, нажмите F12 и перейдите во вкладку Console.

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

Например:

Uncaught SyntaxError: missing ) after argument list
script.js:1

Это сообщение говорит, что ошибка находится в файле script.js на первой строке.

Важно понимать: браузер показывает место, где он заметил проблему. Иногда сама причина находится чуть выше. Например, если пропущена закрывающая скобка, ошибка может проявиться на следующей строке.

Как читать сообщение об ошибке

Обычно сообщение об ошибке можно разделить на несколько частей.

Uncaught ReferenceError: message is not defined
    at script.js:3

Разберем:

  • Uncaught - ошибка не была обработана в коде;
  • ReferenceError - тип ошибки;
  • message is not defined - описание проблемы;
  • script.js:3 - файл и номер строки.

Новичку не обязательно сразу знать все типы ошибок. Но полезно привыкнуть смотреть на три вещи: тип ошибки, описание и строку в файле.

SyntaxError

SyntaxError означает ошибку в синтаксисе. То есть код записан так, что JavaScript не может его прочитать.

Частые причины:

  • пропущена скобка;
  • пропущена кавычка;
  • лишний символ;
  • команда записана не по правилам языка.

Пример:

console.log('Изучаем JavaScript);

Здесь открывающая кавычка есть, а закрывающей нет. Браузер выдаст ошибку синтаксиса.

Правильно:

console.log('Изучаем JavaScript');

Еще пример:

if (10 > 5 {
  console.log('10 больше 5');
}

В условии не хватает закрывающей круглой скобки. Исправленный вариант:

if (10 > 5) {
  console.log('10 больше 5');
}

При SyntaxError сначала проверьте скобки, кавычки и запятые. Очень часто проблема именно там.

ReferenceError

ReferenceError появляется, когда мы обращаемся к имени, которого JavaScript не знает. Чаще всего это переменная, которая не была создана, или опечатка в ее названии.

console.log(userName);

Если переменной userName нет, в консоли можно увидеть:

Uncaught ReferenceError: userName is not defined

Это означает: JavaScript не нашел переменную userName.

Исправим:

let userName = 'Алексей';

console.log(userName);

Еще частая ситуация - опечатка:

let studentName = 'Ирина';

console.log(studenName);

В переменной не хватает буквы t. Для человека это почти незаметно, но для JavaScript studentName и studenName - разные имена.

TypeError

TypeError означает, что мы пытаемся сделать с данными то, что для них невозможно.

Например, метод toUpperCase() работает со строками. Если применить его к числу, возникнет ошибка:

let price = 100;

console.log(price.toUpperCase());

В консоли увидим примерно такое сообщение:

Uncaught TypeError: price.toUpperCase is not a function

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

Правильный пример со строкой:

let message = 'javascript';

console.log(message.toUpperCase());

Результат:

JAVASCRIPT

Еще TypeError часто появляется при работе со страницей, когда элемент не найден, а мы пытаемся с ним что-то сделать. Такие случаи позже будем разбирать отдельно при изучении DOM.

Как искать причину ошибки

Если код не работает, не нужно сразу переписывать весь файл. Лучше идти по шагам.

1. Откройте консоль

Первым делом смотрим вкладку Console. Если там есть красная ошибка, начинаем с нее.

2. Посмотрите файл и строку

Браузер обычно показывает место ошибки. Перейдите в этот файл и проверьте указанную строку, а также одну-две строки выше.

3. Прочитайте описание

Даже если сообщение на английском, в нем часто есть полезные слова: is not defined, is not a function, Unexpected token. Со временем они начнут узнаваться автоматически.

4. Временно добавьте console.log()

Если ошибка неочевидная, можно вывести промежуточные значения:

let age = 18;

console.log(age);

Так проще понять, что хранится в переменной и дошел ли JavaScript до нужной строки.

5. Проверяйте код маленькими частями

Не пишите сразу большой кусок кода без проверки. Лучше добавить несколько строк, сохранить файл, обновить страницу и посмотреть результат. Так ошибку найти намного проще.

Что дальше

Ошибки в JavaScript - это не конец работы, а способ понять, что именно нужно исправить. Консоль показывает тип ошибки, описание и место в файле. Этого уже достаточно, чтобы начать искать причину.

Дальше разберем структуру JavaScript-кода: из чего состоят инструкции, как читается файл и почему порядок строк влияет на результат.