TypeError: Cannot read Property '0' of Undefined in JS

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

TypeError: Cannot read Property '0' of Undefined in JS #

The "Cannot read Property '0' of undefined" error occurs when accessing an undefined value at index 0. To solve the error, initialize the variable to the correct data type, e.g. array or string, before accessing the index.

cannot read property 0 of undefined

Here is an example of how the error occurs.

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

To solve the error, provide a fallback value for the variable before accessing it at a specific index.

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 used the logical OR (||) operator to provide a fallback value (an empty list or an empty string) when declaring the two variables.

The logical OR (||) operator returns the value to the right if the value to the left is falsy (e.g. undefined).

You can also use an if statement to check if the value is of the expected type before accessing the index.

Alternatively, you can use the optional chaining (?.) operator.

index.js
const arr = undefined; console.log(arr?.[0]); // ✅ undefined const str = undefined; console.log(str?.[0]); // ✅ undefined
The optional chaining (?.) operator short-circuits returning undefined if the reference is equal to undefined or null.

The "Cannot read Property '0' of undefined" error often occurs when trying to access an index in 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 an undefined value at index 0 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

The operator returned undefined because arr[0] returns undefined.

The optional chaining (?.) operator returns the value if an element with the specified index exists.

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 value.

Conclusion #

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

Make sure to initialize the variable to the correct type, e.g. array or string, before accessing the index.

Further Reading #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.