Cannot read property of undefined in JavaScript

The TypeError: Cannot read property of undefined is one of the most common type errors in JavaScript. It occurs when we try to read a property or a function on an undefined variable or when we try to access a property on a DOM element that doesn't exist.

Let us take an example of the below code:

const product = undefined;
// TypeError: Cannot read properties of undefined (reading 'brand')
console.log(product.brand);

Here we are trying to read a property brand on object product which is undefined.

To fix the TypeError: cannot read property of undefined, we can use the optional chaining operator on the variable before accessing a property. If the variable is undefined or null, the optional chaining operator will return undefined immediately and prevent the property access.

const product = undefined;
console.log(product?.brand); // output: undefined
// This will works for nested property access also
console.log(product?.brand?.name); // output: undefined
// Usage in if/else statements
if (product?.brand) {
  console.log(product.brand);
} else {
  console.log("Can't find 'brand' property in 'product'");
}

The optional chaining (?.) operator allows us to access a property on an object without throwing an error if the reference is invalid. We can use the optional chaining (?.) operator in nested property access as product?.brand?.name.

When we access a property on a DOM element that doesn't exist

In another scenario we get the TypeError: Cannot read property of undefined when we access a property on a DOM element that doesn't exist. Let us take the below example:

 const elements = document.getElementsByClassName('not-existing-class-name');
 // TypeError: Cannot read properties of undefined (reading 'innerHTML')
 console.log(boxes[0].innerHTML);

We can solve the error using the optional chain operator inside the if condition as given below example.

const elements = document.getElementsByClassName('not-existing-class-name');
if (elements[0]?.innerHTML) {
	console.log(elements[0].innerHTML);
} 
else {
	console.log('element does not exist');
}

In the above code, If the first index of the elements array contains the innerHTML property, then if block will run otherwise, the else block will run.

Solution for JavaScript before ECMAScript 2020

Here we are using try-catch inside the function. This solution can be used for JavaScript before ECMAScript 2020.

function getSafe(fn, defaultVal) {
  try {
    return fn();
  } catch (e) {
    return defaultVal;
  }
}
// use it like this
console.log(getSafe(() => obj.a.lot.of.properties));
// or add an optional default value
console.log(getSafe(() => obj.a.lot.of.properties, 'nothing'));