Ошибка TypeError: что это и как её исправить
- 7 июля 2023
Ошибки 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
- Перед выполнением операций внимательно проверяйте типы данных переменных.
- Используйте условный оператор
if
для проверки, определена ли переменная, прежде чем вызывать методы или выполнять операции с ней. - При работе с функциями проверяйте, что передаваемые аргументы имеют правильный тип данных.
- Используйте инструменты разработчика — особенно полезна консоль — чтобы отслеживать и исправлять ошибки типа TypeError.
Следуя этим советам, можно значительно сократить риски появления ошибок TypeError и повысить надёжность и корректность вашего JavaScript-кода.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
![300кк в наносекунду](https://assets.htmlacademy.ru/previews/blog/2179/default1709791748864@1x.png)
300кк в наносекунду
Игра, где нужно забрать своё и продержаться ещё один день.
- 7 марта 2024
![9 книг по JavaScript для начинающих в 2024](https://cs1.htmlacademy.ru/blog/js/books-javascript/preview.png)
9 книг по JavaScript для начинающих в 2024
Все вокруг говорят, что книги — прошлый век. Но вовремя прочитанная хорошая книжка может здорово помочь в изучении нового языка или технологии, а то и вообще целиком объяснить какую-нибудь важную штуку. Например, какие бывают алгоритмы, или зачем нужен рефакторинг. К тому же, хоть фреймворки меняются каждый год, основы обычно долго не меняются.
Мы опросили знакомых разработчиков, узнали, что читают они сами, и предлагаем вам подборку хороших книг по JavaScript.
- 6 марта 2024
![Объект URL в JavaScript: полный разбор](https://cs1.htmlacademy.ru/blog/js/url/preview.png)
Объект URL в JavaScript: полный разбор
Объект URL
в JavaScript представляет URL-адрес и предоставляет удобные методы для работы с ним. Он позволяет анализировать, конструировать и декодировать URL-адреса.
Создать объект URL
можно двумя способами:
Конструктор URL()
— самый распространённый способ, в котором вы передаёте любой URL в виде строки в качестве аргумента.
const url = new URL("https://www.example.com/path?query=123#hash");
Использование window.location
— это глобальный объект в браузерах, который содержит информацию о текущем URL.
const currentUrl = new URL(window.location.href);
- 23 января 2024
![Генерация QR-кодов на JS в 4 шага. Node.js + qrcode](https://cs1.htmlacademy.ru/blog/js/qr-generator/preview.png)
Генерация QR-кодов на JS в 4 шага. Node.js + qrcode
Давайте сделаем простой REST API на Node.js и Express, который будет генерировать QR-коды для любой ссылки. Если у вас ещё не установлены Node.js
и npm
, установите их с официального сайта.
- 22 ноября 2023
![ChatGPT не справляется](https://assets.htmlacademy.ru/previews/blog/2153/default1698921768956@1x.png)
ChatGPT не справляется
Притворитесь нейросетью и решите 101 задачку по JavaScript как можно быстрее.
- 2 ноября 2023
![Знакомство с JavaScript](https://cs1.htmlacademy.ru/blog/js/introduction-to-javascript/preview.png)
Знакомство с JavaScript
Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML и оформить ее стилями с помощью CSS, пришло время оживить её с помощью JavaScript (JS). JavaScript — это мощный язык программирования, который используется для создания интерактивных и динамических веб-сайтов.
Вы можете добавить JavaScript в ваш HTML-документ двумя способами:
Встроенный JavaScript: непосредственно в HTML-документ, в тегах <script>
:
<script>
alert("Привет, мир!");
</script>
Внешний JavaScript: подключение внешнего .js
файла к HTML-документу:
<script src="script.js"></script>
- 1 ноября 2023
![Событие onclick в JS на примерах](https://cs1.htmlacademy.ru/blog/js/onclick/preview.png)
Событие onclick в JS на примерах
Интерактивность — ключевой компонент любого современного сайта. И одним из наиболее часто используемых событий для создания интерактивности является событие onclick
. В этой статье мы подробно разберёмся, что такое событие onclick
, как его использовать и приведем примеры применения.
Событие onclick
— это событие JavaScript, которое активируется, когда пользователь кликает на определенный элемент страницы. Это может быть кнопка, ссылка, изображение или любой другой элемент, на который можно нажать.
- 30 октября 2023
![Как перевернуть сайт. Самая короткая инструкция](https://assets.htmlacademy.ru/previews/blog/2141/default1698229018763@1x.png)
Как перевернуть сайт. Самая короткая инструкция
Не представляем, зачем это может понадобиться, но не могли пройти мимо.
Никакой магии. Мы вызываем JavaScript-функцию rotateBody()
, которая применяет свойство transform
с значением rotate(180deg)
к элементу <body>
. Когда вы нажмете на кнопку «Перевернуть», всё, что находится внутри <body>
будет повернуто на 180 градусов (то есть, встанет вниз головой)
function rotateBody() {
document.body.style.transform = 'rotate(180deg)';
}
<button onclick="rotateBody()">Перевернуть</button>
Но такой код повернёт страницу только один раз. Если нужно, чтобы она возвращалась обратно при втором клике, усложним код:
let isRotated = false;
function rotateBody() {
if (isRotated) {
document.body.style.transform = 'rotate(0deg)';
document.body.style.direction = "ltr";
} else {
document.body.style.transform = 'rotate(180deg)';
document.body.style.direction = "rtl";
}
isRotated = !isRotated;
}
Надеемся, вы прочитали это описание до того, как нажать на кнопку.
- 25 октября 2023
![Как узнать геолокацию: Geolocation API](https://cs1.htmlacademy.ru/blog/js/geolocation/preview.png)
Как узнать геолокацию: Geolocation API
Geolocation API позволяет сайтам запрашивать, а пользователям предоставлять свое местоположение веб-приложениям. Геолокация может использоваться для выбора города в интернет-магазине, отображения пользователя на карте или навигации в ближайший гипермаркет.
Основной метод Geolocation API — getCurrentPosition()
, но есть и другие методы и свойства, которые могут пригодиться.
- 16 октября 2023
![Что такое localStorage и как им пользоваться](https://cs1.htmlacademy.ru/blog/js/localstorage/preview.png)
Что такое localStorage и как им пользоваться
localStorage
— это место в браузере пользователя, в котором сайты могут сохранять разные данные. Это как ящик для хранения вещей, которые не исчезнут, даже если вы выключите компьютер или закроете браузер.
До localStorage
разработчики часто использовали cookies, но они были не очень удобны: мало места и постоянная передача данных туда-сюда. LocalStorage появился, чтобы сделать процесс более простым и эффективным.
- 12 октября 2023