«TypeError: cannot read properties of undefined» — одна из самых частых ошибок в JavaScript, на которую натыкаются все новички. Звучит пугающе, но причина почти всегда одна и та же. Разберём.
Что означает эта ошибка
Она возникает, когда вы обращаетесь к свойству или методу у значения, которого не существует — у undefined или null. Например, пытаетесь прочитать user.name, а сам user оказался undefined. JavaScript не может достать name из «ничего» — отсюда ошибка.
Частые причины
- Данные ещё не загрузились. Обращаетесь к ответу сервера до того, как он пришёл.
- Опечатка в имени.
user.nmaeвернёт undefined, а обращение к его свойству — ошибку. - Элемента нет на странице.
document.querySelectorне нашёл элемент и вернул null. - Функция ничего не вернула — забыли
return, получили undefined.
(reading 'name') подсказывает, какое именно свойство вы пытались прочитать. Значит, объект слева от .name оказался пустым. Это сразу указывает, где искать проблему.Как чинить
Проверяйте, что объект существует, прежде чем читать его свойства. Удобен оператор опциональной цепочки ?.:
// упадёт, если user === undefined
console.log(user.name);
// безопасно: вернёт undefined без ошибки
console.log(user?.name);Также помогает значение по умолчанию: const name = user?.name ?? 'Гость';
Как найти источник
Выведите подозрительное значение в консоль (console.log(user)) прямо перед строкой с ошибкой — вы увидите, что там undefined, и поймёте, почему. Стек ошибки в консоли показывает точную строку и файл. Двигайтесь от неё вверх по цепочке, проверяя, где данные «потерялись».
Частые ошибки
- Читают данные до их загрузки, не дождавшись ответа.
- Игнорируют текст ошибки, где прямо указано проблемное свойство.
- Не проверяют результат querySelector на null.
Что запомнить
TypeError «cannot read properties of undefined» значит, что вы обратились к свойству у несуществующего значения (undefined/null). Причины: данные не загрузились, опечатка, элемент не найден, функция ничего не вернула. Читайте, какое свойство указано в ошибке, проверяйте объект через ?. и значения по умолчанию, а источник ищите через console.log и стек ошибки.
Коротко: вопросы и ответы
Почему возникает TypeError? Вы читаете свойство у undefined или null — значения, которого нет.
Как быстро защититься? Оператором ?. и значением по умолчанию через ??.
Как найти причину? Вывести объект в консоль перед ошибкой и посмотреть стек — он укажет строку.
Похожие ошибки
Рядом встречаются «cannot read properties of null» (то же самое, но значение null — например, элемент не найден на странице) и «x is not a function» (вы вызвали как функцию то, что ей не является, часто из-за опечатки или неверного импорта). Подход тот же: посмотрите через console.log, чем на самом деле оказалось значение, и проверьте его перед использованием.
Почему ошибка появляется не всегда? Часто зависит от данных: при одних значениях объект есть, при других — нет; отсюда «плавающие» ошибки.
Комментарии