Uncaught TypeError: Cannot read property _ of undefined

The TypeError object represents an error when an operation could not be performed, typically (but not exclusively) when a value is not of the expected type.

TypeError is thrown when an operand or argument passed to a function is incompatible with the type expected by that operator or function.

This error occurs when you read a property or call a method of an undefined object.

TypeError - JavaScript | MDN

When you run this code, you will get this message in browser:

Undefined & JavaScript

In JavaScript there is Undefined ( type ), undefined ( value ) and undefined ( variable ).

A variable that has not been assigned a value is of type undefined. A method or statement also returns undefined if the variable that is being evaluated does not have an assigned value. A function returns undefined if a value was not returned.

undefined - JavaScript | MDN

What are solutions to avoid getting this particular error messages?

Short-circuiting with &&

Short circuiting means that in JavaScript when we are evaluating an AND expression (&&), if the first operand is false, JavaScript will short-circuit and not even look at the second operand.

In the case of &&​, this means that the expression will stop moving forward after it reaches its first false value.

online && getData();

try & catch statements

The try statement allows you to define a block of code to be tested for errors while it is being executed.

The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.

try {
   Block of code to try
 }
 catch(err) {
   Block of code to handle errors
 }

Optional chaining

The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.

The ?. operator is like the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist.

console.log(favorites?.video?.shows[0]); // 'The Simpsons'
​​console.log(favorites?.audio?.audiobooks[0]); // undefined

The ?.​ operator works by short-circuiting: if the left-hand side of the ?.​ operator evaluates to null​ or undefined​, the entire expression will evaluate to undefined​ and the right-hand side will remain unevaluated.

​​To have a custom default, we can use the ||​ operator in the case of an undefined.

console.log(favorites?.audio?.audiobooks[0] || "The Hobbit");

If you use JavaScript according to ECMAScript 2020 or later versions, use optional chaining. TypeScript has added support for optional chaining in version 3.7.

const adventurer = {
   name: 'Alice',
   cat: {
        name: 'Dinah'
        }
};
const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined
console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

The optional chaining operator provides a way to simplify accessing values through connected objects when it’s possible that a reference or function may be undefined or null.

let nestedProp = obj.first?.second;

By using the ?. operator instead of just ., JavaScript knows to implicitly check to be sure obj.first is not null or undefined before attempting to access obj.first.second. If obj.first is null or undefined, the expression automatically short-circuits, returning undefined.

Optional chaining (?.) - JavaScript | MDN

if statement

If you want to check if sth is not undefined you can write an if statement like this:

if (var !== undefined) {
// do sth.
}