How Can I Avoid 'Cannot Read Property of Undefined' Errors in JavaScript?

Avoiding 'Cannot Read Property of Undefined' Errors

When working with complex data structures, it's common to encounter errors related to undefined properties. Consider the following example:

// This array contains a mix of nested objects and non-nested values
var test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];

Iterating over test can lead to errors when accessing properties of nested objects that may not exist. For instance, the following code throws an error when accessing a.b.c:

for (i=0; i<test.length i console.log throws error on><p>To avoid such errors, several approaches can be used:</p>
<p><strong>Optional Chaining (ES2020 ) and TypeScript 3.7 </strong></p>
<p><strong>Update:</strong> For modern browsers and TypeScript, the recommended solution is optional chaining (?.) operator:</p>
<pre class="brush:php;toolbar:false">obj?.a?.lot?.of?.properties

Function-Based Workaround (Pre-ES2020 and Pre-TypeScript 3.7)

A simple workaround is to use an helper function:

function getSafe(fn, defaultVal) {
  try {
    return fn();
  } catch (e) {
    return defaultVal;
  }
}

// Use the function to access the property safely
console.log(getSafe(() => obj.a.lot.of.properties));

This function returns the result of calling the provided function, or a default value if an error occurs. Using this approach, you can avoid errors and conditionally access nested properties:

console.log(getSafe(() => obj.a.lot.of.properties, 'nothing'));

The above is the detailed content of How Can I Avoid 'Cannot Read Property of Undefined' Errors in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!