Проверка JavaScript: как найти ошибку в коде

Скрипт не запускается, а в консоли краснеет Uncaught SyntaxError. Или того хуже, страница молча не реагирует, и непонятно, где сломалось. Чаще всего причина банальна: пропущенная скобка или лишняя запятая. Разберём, как быстро найти такую ошибку.

Как проверить JavaScript на ошибки

Быстрее всего проверить JavaScript онлайн. Вставьте код, и парсер укажет строку и колонку, где споткнулся разбор. Это удобно, когда нужно проверить чужой сниппет, кусок кода с телефона или просто получить второе мнение, не открывая IDE.

Локально то же самое умеет консоль браузера (F12 → Console). Вставьте код, нажмите Enter, и движок сразу сообщит о синтаксической ошибке. А в редакторе за этим следит линтер ESLint, он подчёркивает проблему прямо по мере набора.

Все эти инструменты ловят синтаксис, то есть грамматику языка. Логические ошибки, когда код валиден, но делает не то, они не видят.

Частые синтаксические ошибки

Больше девяти из десяти «поломок» — это одно из следующего.

Незакрытая скобка или кавычка. Пропустили }, ) или ", и парсер доходит до конца файла, так и не поняв структуру:

function greet(name {
  return "Привет, " + name
}

Здесь нет ) после name, отсюда и Unexpected token '{'.

Лишняя или недостающая запятая в объекте и массиве:

const user = {
	name: 'Дмитрий',
	age: 30,
	city: 'Москва' // висячая запятая в объекте допустима,
} // а вот пропуск запятой между полями — ошибка

Опечатка в ключевом слове: fucntion, retrun, cosnt. Движок не узнаёт слово и падает.

Спутанные = и ==: if (x = 5) вместо if (x === 5). Это не ошибка синтаксиса, код запустится, но сделает присваивание вместо сравнения. Такое ловит уже линтер, а не парсер.

Забытые кавычки у строки: const city = Москва. Движок примет Москва за имя переменной, которой нет.

Синтаксис или выполнение

Ошибки в JavaScript делятся на два вида, и различать их важно.

• Синтаксические (SyntaxError). Код не соответствует грамматике языка, и скрипт не запускается вообще. Их ловит проверка синтаксиса ещё до запуска, просто разбирая текст.
• Ошибки выполнения (ReferenceError, TypeError и другие). Код валиден и запустился, но упал уже в работе: обратились к несуществующей переменной, вызвали метод у undefined. Их видно только в рантайме, в консоли браузера.

Проверка синтаксиса закрывает первый случай, тот, где IDE ещё не открыта, а понять «почему вообще не грузится» нужно быстро.

А что с TypeScript

TypeScript — это тот же JavaScript плюс типы: аннотации вроде name: string, интерфейсы, дженерики. Обычная проверка JS на таком коде споткнётся уже на двоеточии с типом, для JavaScript это чужой синтаксис. TypeScript проверяет свой компилятор tsc или онлайн-песочница TypeScript Playground, они смотрят и грамматику, и то, сходятся ли типы. Наш инструмент рассчитан на JavaScript и JSX, то есть на то, что выполняется в браузере напрямую. Для проверки типов TS используйте tsc.

Коротко

• Синтаксическую ошибку в JS ищите по строке и колонке из сообщения парсера. Проверьте код онлайн, в консоли браузера (F12) или через ESLint.
• Чаще всего виноваты незакрытая скобка или кавычка, пропущенная запятая, опечатка в ключевом слове.
• SyntaxError не даёт коду запуститься, а TypeError и ReferenceError возникают уже в рантайме. Это разные вещи.
• Типы TypeScript обычная JS-проверка не видит, для них нужен tsc.