Ошибка Cannot read property of undefined в JS

Ошибка “Uncaught TypeError: Cannot read property of undefined” возникает, когда вы пытаетесь получить доступ к свойству с неопределенным значением. Обычно это происходит, когда вы пытаетесь получить доступ к свойству переменной, которой не было присвоено значение.

Несколько других распространенных сценариев включают:

• Вы пытаетесь получить доступ к свойству объекта, которое не определено
• Вы пытаетесь получить доступ к индексу массива, который выходит за границы
• Вы пытаетесь вызвать функцию, которая не определена
• Вы пытаетесь получить доступ к переменной, которая не определена

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

Вот пример того, как может возникнуть эта ошибка:

// Define a variable, but don't give it a value
let user;

// Try to access a property of the variable
console.log(user.name); // Throws 'Cannot read property 'name' of undefined'

Чтобы исправить эту ошибку, необходимо убедиться, что переменной присвоено значение, прежде чем пытаться получить доступ к ее свойствам. Это можно сделать, либо присвоив значение переменной при ее объявлении, либо присвоив ему значение позже в коде.

// Define a variable with a default value
let user = { name: 'John Doe' };

// Access the property of the variable
console.log(user.name); // Outputs: 'John Doe'

В качестве альтернативы можно проверить, не является ли переменная неопределенной, прежде чем пытаться получить доступ к ее свойствам, например, так:

// Define a variable, but don't give it a value
let user;

// Check if the variable is defined before accessing its properties
if (typeof user !== 'undefined') {
  console.log(user.name);
} else {
  console.log('user is not defined');
}

Индекс массива выходит за границы

Эта ошибка также может возникнуть, когда вы пытаетесь получить доступ к элементу массива, используя индекс, который выходит за границы массива. Например:

const colors = ['red', 'green', 'blue'];

console.log(colors[3]); // This will throw an error, because the index 3 is out of bounds of the array

Чтобы исправить это, необходимо убедиться, что вы не пытаетесь получить доступ к элементу массива, используя индекс, выходящий за границы. Это можно сделать, проверив длину массива перед попыткой доступа к элементу по индексу, как показано ниже:

const colors = ['red', 'green', 'blue'];

const index = 3;

if (index >= 0 && index < colors.length) {
    // This will print the element at the specified index
    console.log(colors[index]);
} else {
    console.log('The index is out of bounds');
}

Использование fallback-значения

Другое решение – не обращаться к свойству вообще, когда переменная не определена, и использовать вместо этого fallback-значение по умолчанию:

const person = {
    name: 'John Doe'
};

// If the `age` property is not defined on the `person` object, we will use the default value of 30
const age = person.age || 30;

console.log(age); // This will print 30

Эта техника может быть полезна, когда вы имеете дело с переменными, которые могут быть определены или не определены, и вы хотите избежать ошибки “Uncaught TypeError: Cannot read property of undefined” предоставив вместо него значение по умолчанию.

Использование замены

В зависимости от вашего приложения, вы также можете попытаться заменить неопределенную переменную значением по умолчанию, используя оператор ||. Вот пример:

let person;

// If the `person` variable is undefined, we will use a default object instead
person = person || {
    name: 'John Doe',
    age: 30,
    job: 'unemployed'
};

console.log(person.name); // This will print 'John Doe'

Вы также можете использовать оператор ??

let person;

// If the `person` variable is undefined, we will use a default object instead
person = person ?? {
    name: 'John Doe',
    age: 30,
    job: 'unemployed'
};

console.log(person.job); // This will print 'unemployed'

Оператор ?? возвращает правый операнд, если левый операнд равен null или undefined, а не любое ложное значение.

const x = null;
const y = 5;

// Without the ?? operator, this would evaluate to false and x would be assigned the value of 0
const result = x ?? y;

// With the ?? operator, the result variable will be assigned the value of y (5)
// because the left-hand operand (x) is null
console.log(result); // 5

Если у вас появились вопросы про ошибку “Uncaught TypeError: Cannot read property of undefined” в JS, мы будем рады ответить на них в комментариях ниже.