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

Что означают ошибки SyntaxError

SyntaxError: Missing) after argument list — пропущена закрывающая круглая скобка после списка аргументов функции.

// Забыли поставить скобку после списка аргументов
console.log('Hello', 'World!';

SyntaxError: Missing } after function body — в функции или блоке кода пропущена закрывающая фигурная скобка.

// Не добавили закрывающую фигурную скобку
function myFunction() {
  console.log('Hello');

SyntaxError: Unexpected end of input — отсутствует закрывающая скобка, кавычка или другой элемент, обозначающий конец кода.

 // Пропустили закрывающую фигурную скобку
if (x === 10) {
  console.log('x is 10');

SyntaxError: Function statements require a function name — не указано имя функции.

// Забыли указать имя функции
function() {
  console.log('Hello, World!');
}

SyntaxError: Unexpected token — в коде обнаружен недопустимый, неожиданный символ или токен. Часто причина этой ошибки — лишние точки, запятые и другие символы.

// Использовали недопустимый символ — %
const x = 5;
console.log(x * 10%);

Ещё такая ошибка появляется, если неправильно объявить имя переменной.

// Начали имя переменной с числа
const 1variable = 'Hello';

💡 Имена переменных не могут начинаться с цифры, содержать пробелы, !, @, #, $, % и некоторые другие символы. Исключение — знак подчёркивания _. Нельзя использовать зарезервированные ключевые слова, например, var, let, const, if, else и function.

Как правильно называть переменные

Как исправить ошибку SyntaxError

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

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

💫 Линтер — это инструмент, который проверяет синтаксис и стиль кода на ошибки. Он находит проблемные места и отображает их в терминале или среде разработки. Это помогает разработчикам исправлять ошибки до того, как код будет развёрнут на сайте или в приложении.

Как работать с ESLint

Вы заметите ошибку прямо в редакторе, ещё при написании кода

Если пропустите опечатку в редакторе, линтер сообщит о ней в терминале при попытке собрать проект.

Сообщение об ошибке

Так же и с консолью — если с кодом что-то не так, вы увидите описание проблемы и строку, на которой закралась ошибка. Например, здесь опечатка на второй строке.

Строка с ошибкой

Если кликнуть по ссылке с названием строки, откроется код. Вы сможете прямо в инструментах разработчика понять, что и где нужно поправить.

И помните: опечатки в коде бывают даже у опытных разработчиков. Главное — вовремя их отслеживать и исправлять, потому что даже из-за маленькой запятой код может работать не так, как вам бы этого хотелось.

Материалы по теме