1

Периодически, при разработке на JavaScript возникает ошибка: Cannot read property *** of undefined или Cannot read property *** of null

Например в этом коде:

const count = result.data.length;

Cannot read property of undefined (reading 'length')

Или в этом:

const dataMap = response.lines.map(item => item * 2);

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

Как понять причину ошибки, что оно означает, почему появляются и как ее исправить?

1 ответ 1

1

Cannot read property of undefined/null (reading 'method')

Ошибка нам говорит, что мы пытаемся вызвать свойство или метод method объекта, в то время, как сам объект являет null или undefined

Рассматривать будем на примере данного объекта

const data = {
    name: 'TypeError',
    message: '',
    errors: null,
    sayHi: function() {
        console.log(this.name)
    }
}

Ошибка возникнет, если мы попытаемся выполнить следующий код:

data.errors.forEach(item => console.log(item)); // null.forEach()

Uncaught TypeError: Cannot read properties of null (reading 'forEach')

data.values.map(item => console.log(item)); // undefined.map()

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

Данные ошибки говорят нам о том, что мы пытаемся вызвать методы у ничего(null или undefined).
data.errors это null. У null нет методов. А data.values вообще не существует. Нельзя вызвать метод у того, что не существует.

Так же, если объявить переменную и попытаться вызвать у нее какой либо метод без инициализации, то получим ошибку(в данном случае Cannot read properties of undefined (reading 'push')):

const arr;
arr.push(1); // undefined.push();

Cannot read property

of undefined - ключ не определен, т.е. отсутствует в объекте.
of null - ключ в объекте есть, но имеет значение null. У null нет методов.

Как понять, где возникла ошибка?

В Node.JS:

file:///C:/dev/nodeserver/SO/11.js:10 // Номер строки
data.errors.forEach(item => console.log(item)); // null.forEach()
            ^
TypeError: Cannot read properties of null (reading 'forEach')
    at ←[90mfile:///C:/dev/nodeserver/SO/←[39m11.js:10:13
←[90m    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)←[39m
    at async Promise.all (index 0)
←[90m    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)←[39m
←[90m    at async loadESM (node:internal/process/esm_loader:91:5)←[39m
←[90m    at async handleMainPromise (node:internal/modules/run_main:65:12)←[39m

Здесь at ←[90mfile:///C:/dev/nodeserver/SO/←[39m11.js:10:13 мы видим номер строки с ошибкой и позицию, где произошла ошибка.

В браузере это выглядит так:

Uncaught TypeError: Cannot read properties of null (reading 'forEach')
    at 123.html?_ijt=vkfkm1ubo3ut5c02m72ihg4lgu:72:15

где 72 это номер строки, а 15 это точка, где возникла ошибка.

Как этого избежать?

Проверять, что приходит в объекте и существуют ли в объекте нужные нам значения. Один из вариантов проверки, воспользоваться console.log().
Можно начать с последнего ключа, однако лучше весь пусть вывести, что бы понимать структуру, с которой работаем:

console.log(data) // { name: 'TypeError', message: '', errors: null, sayHi: [Function] }
console.log(data.errors) // null

Так же можно воспользоваться оператором необязательной цепочки вызовов '?.'

const a = data?.errors?.forEach(item => console.log(item)); // null.forEach()
const b = data?.values?.map(item => console.log(item)); // undefined.map()

Оператор необязательной цепочки вызовов будет проверять значение слева. Если значение null или undefined, цепочка прерывается и возвращается значение undefined.

Для объявленных переменных указывать тип данных

const arr = []; // Указываем, что меременная это массив
arr.push(1); // Можем воспользоваться любым методом массива;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.