Solve - Cannot read Property toLowerCase of Undefined in JS

avatar

Borislav Hadzhiev

Sat Oct 23 20212 min read

banner

Photo by Tim Foster

Solve - Cannot read Property toLowerCase of Undefined #

The "Cannot read property 'toLowerCase' of undefined" error occurs when calling the toLowerCase() method on an undefined value. To solve the error, initialize the value to an empty string or make sure to only call the toLowerCase method on strings.

index.js
const str = undefined; // โ›”๏ธ Cannot read properties of undefined (reading 'toLowerCase') str.toLowerCase();

To solve the error initialize the value of the variable to an empty string, or make sure to only call the String.toLowerCase method on strings. Here are multiple examples.

index.js
const someVar = undefined; // โœ… Initialize to empty string const str = someVar || ''; // ๐Ÿ‘‰๏ธ "" // โœ… Using ternary const result1 = typeof str === 'string' ? str.toLowerCase() : ''; console.log(result1); // ๐Ÿ‘‰๏ธ "" // โœ… Using optional chaining const result2 = str?.toLowerCase() || ''; console.log(result2); // ๐Ÿ‘‰๏ธ "" // โœ… Using if/else if (typeof str === '') { const result3 = str.toLowerCase(); } else { console.log('str is not a string'); } // โœ… Initialize to empty string const result4 = (str || '').toLowerCase(); console.log(result4); // ๐Ÿ‘‰๏ธ ""

When declaring the str variable we used the logical OR (||) operator to provide a fallback in case someVar stores a falsy value (e.g. undefined).

The next example uses a ternary operator, which is very similar to an if/else statement.

If the expression to the left of the question mark is falsy (e.g. undefined), the value to the left of the colon is returned, otherwise the value to the right of the colon is returned.

The next example uses the optional chaining (?.) operator. The operator will short-circuit instead of throwing an error if the value to the left is equal to null or undefined.

The next example uses a simple if/else statement where we check if the value the str variable stores is a string before calling the toLowerCase() method.

The last example uses the logical OR (||) operator to provide a fallback if the value is falsy.

Common reasons the "Cannot read property 'toLowerCase' of undefined" error occurs are:

  1. Calling the method on a class property that is not initialized to a string
  2. Calling the method on an array index that doesn't exist

Here's an example that shows the error being thrown when using arrays.

index.js
const arr = []; // ๐Ÿ‘‡๏ธ Cannot read properties of undefined (reading 'toLowerCase') arr[0].toLowerCase();

To solve this, you have to make sure the element at the index is available and a string.

index.js
const arr = []; const result = typeof arr?.[0] === 'string' ? arr[0].toLowerCase() : ''; console.log(result); // ๐Ÿ‘‰๏ธ ""

Before calling the toLowerCase method, we check if the array element at the specific index is a string.

If using classes, you have to declare the class property and set it to an empty string before accessing it.

index.js
class Person { // โœ… Initialize to empty string last = ''; // โœ… Initialize from parameters constructor(first) { this.first = first; } lowerFirst() { return this.first.toLowerCase(); } lowerLast() { return this.last.toLowerCase(); } } const p1 = new Person('John'); p1.lowerFirst(); p1.lowerLast();

We initialized the values for the first and last class properties. Had we not done that, we would get the error when trying to access the properties.

Conclusion #

The "Cannot read property 'toLowerCase' of undefined" error occurs when calling the toLowerCase() on an undefined value.

To solve the error, make sure to only call the toLowerCase method on strings.

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