Solve - Cannot read Property '0' of Undefined in JS

avatar

Borislav Hadzhiev

Sat Oct 23 20212 min read

banner

Photo by Galen Crout

Solve - Cannot read Property '0' of Undefined #

The "Cannot read Property '0' of undefined" error occurs when trying to access the index 0 on a variable that stores an undefined value. To solve the error make sure you access the index only on values that support index access, e.g. arrays or strings.

index.js
const arr = undefined; // ⛔️ Cannot read properties of undefined (reading '0') console.log(arr[0]); const str = undefined; // ⛔️ Cannot read properties of undefined (reading '0') console.log(str[0]);

To solve the error, initialize the value to specific data type before accessing the index and use an if statement to be certain it's of the expected type.

index.js
const fromDb = undefined; // ✅ initialize to empty Array if Undefined const arr = fromDb || []; console.log(arr[0]); // ✅ undefined // ✅ initialize to empty String if Undefined const str = fromDb || ''; console.log(str[0]); // ✅ undefined // ✅ check if array before accessing index if (Array.isArray(arr)) { console.log(arr[0]); } else { console.log('arr is not an array'); } // ✅ check if string before accessing index if (typeof str === 'string') { console.log(str[0]); } else { console.log('str is not a string'); }

We made sure to initialize the value of the arr and string variables to the expected type if their value is falsy, e.g. undefined.

The logical OR (||) operator allows us to provide a fallback value if the value to the left is falsy.

We then conditionally check if the value is of the expected type, before accessing the index.

You can also use the optional chaining (?.) operator.

index.js
const arr = undefined; console.log(arr?.[0]); // ✅ undefined const str = undefined; console.log(str?.[0]); // ✅ undefined

Instead of throwing an error, the optional chaining (?.) operator short-circuits returning undefined, if the reference is equal undefined or null.

The "Cannot read Property '0' of undefined" error often occurs when trying to access an index of a nested array.

index.js
const arr = []; // ⛔️ Cannot read properties of undefined (reading '0') console.log(arr[0][0]);

The array we declared is empty, which means that arr[0] returns undefined.

Trying to access index 0 on a value that is undefined causes the error.

A concise way to avoid the error, would be to use the optional chaining (?.) operator.

index.js
const arr = []; console.log(arr?.[0]?.[0]); // ✅ undefined

We didn't get an error, instead the operator returned undefined, because arr[0] returned undefined.

If the array contains an element at the specified index, the operator would allow us to access it.

index.js
const arr = [['hello']]; console.log(arr?.[0]?.[0]); // ✅ "hello"

The inner array contains an element at index 0, so the optional chaining operator returned the element.

Conclusion #

The "Cannot read property '0' of undefined" error occurs when trying to access the 0th index of a variable that stores an undefined value.

Make sure the variable on which you are accessing the index has been initialized to the specific type, e.g. array or string before accessing the index.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee