Ошибки TypeError появляются, когда разработчики пытаются выполнить операцию с неправильным типом данных. Давайте разберём несколько примеров: почему появилась ошибка и как её исправить.

TypeError: Cannot read properties of null/undefined

Что означает: вы пытаетесь обратиться к свойству объекта, который имеет значение null или undefined.

Пример: объявим переменную, но не присвоим ей значение. Если вызовем метод toUpperCase() или любой другой на такой переменной, появится ошибка TypeError:

let name;
name.toUpperCase(); // TypeError: Cannot read property 'toUpperCase' of undefined

Что делать: проверить значение переменной, которую вы используете.

TypeError: Cannot convert undefined/null to object

Что означает: вы используете null или undefined в качестве объекта.

Пример: попробуем использовать функцию Object.keys(), чтобы получить массив ключей объекта obj. Но так как переменная obj имеет значение undefined и не является массивом, возникнет ошибка TypeError:

let obj = undefined;
let result = Object.keys(obj); // TypeError: Cannot convert undefined to object

Что делать: убедитесь, что вы не используете переменную со значением null или undefined. Проверьте, что вы присваиваете правильное значение объекту, или используйте условные операторы, чтобы избежать использования null или undefined в неподходящих местах.

TypeError: x is not a function

Что означает: вы неправильно использовали функцию или передали неверные аргументы.

Пример: попытаемся вызвать переменную numbers как функцию. Но так как это обычный массив, мы получим TypeError:

const numbers = [1, 2, 3];
numbers(); // TypeError: numbers is not a function

Что делать: убедитесь, что переменная является функцией или методом объекта. Проверьте, правильно ли объявлена функция или правильно ли вы вызываете метод объекта.

TypeError: x is not iterable

Что означает: вы пытаетесь выполнить итерацию (например, с помощью цикла for...of) по значению, которое не является итерируемым (например, массивом или строкой).

👉 Итерация — это повторное выполнение одного и того же блока кода несколько раз. Самый распространённый способ выполнения итераций в JavaScript — использовать циклы for и while.

Пример: выполним итерацию по значению x. Но так как это число, итерация не может быть выполнена — появится ошибка TypeError:

const x = 123;
for (let item of x) { // TypeError: x is not iterable
  console.log(item);
}

Что делать: проверьте тип данных. Возможно, их стоит преобразовать в другой формат.

Как обработать ошибку TypeError. Конструкция try...catch

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

Чтобы ничего не сломалось, разработчики используют конструкцию try...catch. Она помогает поймать и обработать ошибки и защищает программу от аварийного завершения.

Как использовать конструкцию:

try {
  //Место, где может появиться ошибка
  let name;
  name.toUpperCase(); // TypeError: Cannot read property 'toUpperCase' of undefined
} catch (error) {
  // Дополнительные действия для обработки ошибки
  console.log("Произошла ошибка:", error.message);
}

Внутри блока try находится код, который может вызвать ошибку. Если что-то пойдёт не так и мы столкнёмся с TypeError, выполнение программы перейдёт в блок catch. Здесь мы можем выполнить любые действия, например, вывести ошибку в консоль или показать пользователю модальное окно с просьбой перезагрузить страницу.

🔥 Конструкция try...catch полезна, когда нужно предусмотреть появление ошибок и добавить альтернативные пути выполнения кода.

Однако конструкция не является универсальным решением для исправления TypeError. Её следует использовать лишь тогда, когда вы знаете, как обработать конкретную ошибку. А чтобы снизить риски появления проблем, следуйте следующим рекомендациям.

Как избежать ошибок типа TypeError

  1. Перед выполнением операций внимательно проверяйте типы данных переменных.
  2. Используйте условный оператор if для проверки, определена ли переменная, прежде чем вызывать методы или выполнять операции с ней.
  3. При работе с функциями проверяйте, что передаваемые аргументы имеют правильный тип данных.
  4. Используйте инструменты разработчика — особенно полезна консоль — чтобы отслеживать и исправлять ошибки типа TypeError.

Следуя этим советам, можно значительно сократить риски появления ошибок TypeError и повысить надёжность и корректность вашего JavaScript-кода.

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


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Компоненты в Angular 18: пошаговое руководство

Компоненты в Angular 18: пошаговое руководство

Angular развивается стремительно, и с выходом версии 18 появились новые возможности, которые разработчики могут использовать в своей работе. Одним из ключевых изменений в Angular 18 стало удаление традиционного файла app.module.ts — ему на смену пришли standalone-компоненты. Если вы только начинаете работать с Angular или переходите с более ранней версии, это пошаговое руководство поможет вам разобраться в базовых принципах компонентов в Angular 18. Независимо от вашего уровня — новичок вы или опытный разработчик — этот туториал покажет, как создавать, управлять и эффективно использовать компоненты в Angular.

Читать дальше
JS
  • 19 мая 2025
Полное руководство по Angular @if

Полное руководство по Angular @if

Одно из самых заметных нововведений в Angular — это встроенный синтаксис для управляющих конструкций, который появился в версии 17. Он решает одну из самых частых задач, с которой сталкивается каждый разработчик: показывать или скрывать элементы на странице в зависимости от условия. Раньше для этого использовали привычную структурную директиву *ngIf. Теперь у нас есть более современная альтернатива — синтаксис @if, часть нового подхода к управлению шаблоном.

В этом гайде мы сравним оба варианта, разберёмся, чем @if лучше, и покажем, как можно перейти на него автоматически. Также поговорим об одной распространённой ошибке — о том, как не стоит использовать @if вместе с пайпом async.

Читать дальше
JS
  • 18 мая 2025
Модули Angular для организации кода и ленивой загрузки

Модули Angular для организации кода и ленивой загрузки

Модули — один из ключевых инструментов Angular для построения масштабируемых и поддерживаемых приложений. В этой статье мы подробно рассмотрим:

  • что такое модули в Angular;
  • зачем они нужны;
  • как их использовать для структурирования кода;
  • как реализовать «ленивую» загрузку модулей;
  • и чем отличаются Feature, Core и Shared модули.

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

Читать дальше
JS
  • 12 мая 2025
Навигация в Angular: RouterLink, Router.navigate и Router.navigateByUrl

Навигация в Angular: RouterLink, Router.navigate и Router.navigateByUrl

Директива RouterLink позволяет настраивать переходы между маршрутами прямо в шаблоне Angular. А методы Router.navigate и Router.navigateByUrl, доступные в классе Router, дают возможность управлять навигацией программно — прямо из кода компонентов.

Разберёмся, как работают RouterLink, Router.navigate и Router.navigateByUrl.

Читать дальше
JS
  • 11 мая 2025
Полное руководство по Lazy Loading в Angular

Полное руководство по Lazy Loading в Angular

Если вы создаёте большое Angular-приложение, вам наверняка важно, чтобы оно загружалось быстро. Представьте, что вы устраиваете вечеринку и хотите подавать закуски не сразу, а по мере прихода гостей, чтобы не перегрузить кухню. «Ленивая» загрузка в Angular работает примерно так же: вместо того чтобы загружать всё приложение целиком сразу, вы подгружаете только те части, которые нужны — и только когда они нужны.

В этом пошаговом руководстве мы разберём, как реализовать lazy loading в Angular.

Читать дальше
JS
  • 10 мая 2025
Все (ну или почти все) способы автоматически перезагрузить страницу раз в N секунд

Все (ну или почти все) способы автоматически перезагрузить страницу раз в N секунд

Иногда страницу нужно просто перезагрузить. Полностью. Не компонент, не блок, а именно целиком. Без обсуждений, без лишней логики. Например, чтобы:

  • экран с результатами обновлялся каждые 10 секунд;
  • интерфейс на стенде показывал последние данные без кнопок;
  • страницы в интранете не устаревали, пока никто не смотрит.

Это можно сделать в любой связке: HTML, JS, Python, PHP, Go, Node.js — не важно. Ну и если говорить совсем прямо, то совсем разных способов всего три, а остальное просто вариации.

Читать дальше
JS
  • 5 мая 2025
Vite 6: Новый этап в развитии фронтенд-разработки

Vite 6: Новый этап в развитии фронтенд-разработки

Vite — это современный инструмент сборки, который значительно ускоряет процесс разработки фронтенда, благодаря своим невероятно быстрым и удобным функциям. И вот, наконец, вышел новый релиз Vite 6, который приносит массу улучшений и новых возможностей для разработчиков. Давайте посмотрим, что нового появилось в Vite 6 и как это может повлиять на вашу работу.

Читать дальше
JS
  • 16 января 2025
Всё, что нужно знать о работе с API в JavaScript: пошаговый разбор

Всё, что нужно знать о работе с API в JavaScript: пошаговый разбор

Работа с API — это основа веб-разработки. Если вы хотите получать данные с сервера, отправлять информацию или взаимодействовать с внешними сервисами (например, картами Google, платёжными системами или погодными сервисами), вам не обойтись без этого навыка. Разберём работу с API на практике: от базовых запросов до обработки ошибок и аутентификации.

Читать дальше
JS
  • 14 января 2025

Ошибка JavaScript «Uncaught TypeError: Cannot read property of undefined». Что делать?

Описание проблемы
Эта ошибка возникает, когда вы пытаетесь получить доступ к свойству объекта, который в данный момент имеет значение undefined. Например:


let obj = undefined;
console.log(obj.property); // Uncaught TypeError: Cannot read property 'property' of undefined
  

Возможные причины

  • Объект не был инициализирован. Возможно, переменная еще не была объявлена или ей не присвоено значение.
  • Неправильный путь к данным. Вы пытаетесь обратиться к свойству объекта, но объект отсутствует в цепочке.
  • Асинхронность. Данные могли еще не загрузиться или быть доступны в момент обращения.
  • Опечатка в названии свойства. Вы могли неверно написать имя свойства объекта.

Шаги по исправлению

1. Проверка объекта перед доступом к свойствам

Убедитесь, что объект существует, прежде чем пытаться получить его свойства.

if (obj !== undefined && obj !== null) {
    console.log(obj.property);
}

// Или современный способ:
console.log(obj?.property); // Вернет undefined, если obj равен null или undefined
  

2. Инициализация объекта перед использованием

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

Неверный код:

let data;
console.log(data.user.name); // Ошибка
  

Исправление:


let data = { user: { name: "Иван" } };
console.log(data.user.name); // "Иван"
  

3. Проверка API или данных с сервера

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

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        if (data?.user?.name) {
            console.log(data.user.name);
        } else {
            console.error('Данные пользователя отсутствуют');
        }
    });

4. Использование значений по умолчанию

Для предотвращения ошибок можно задавать значения по умолчанию.

let user = undefined;
let userName = user?.name || "Гость";
console.log(userName); // "Гость"

5. Отладка с помощью console.log

Проверяйте промежуточные значения переменных в консоли браузера.

console.log(obj); // Убедитесь, что объект определен 

Пример из жизни
Вы пишете код для отображения имени пользователя из объекта user:

let user = null; // Данные еще не загружены
console.log(user.name); // Uncaught TypeError: Cannot read property 'name' of null

Исправление:

let user = null;
console.log(user?.name || "Имя пользователя не найдено"); // "Имя пользователя не найдено"

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

JS
  • 15 ноября 2024