TypeError: Cannot read Property 'toLowerCase' of Null in JS

TypeError: Cannot read Property 'toLowerCase' of Null in JS #

The "Cannot read Property 'toLowerCase' of null" error occurs when the toLowerCase() method is called on a variable that stores a null value. To solve the error, make sure to only call the toLowerCase method on strings.

cannot read property tolowercase of null

Here is an example of how the error occurs.

index.js

Copied!
const str = null;

// ⛔️ TypeError: Cannot read properties of null (reading 'toLowerCase')
str.toLowerCase();

To solve the "Cannot read Property 'toLowerCase' of null" error, initialize the value on which you're calling the method to an empty string or make sure to only call the toLowerCase() method on strings.

index.js

Copied!
const example = null;

// ✅ initialize to string if falsy
const str = example || '';

// ✅ Using optional chaining
const result1 = str?.toLowerCase() || '';
console.log(result1); // 👉️ ""

// ✅ Using ternary operator
const result2 = typeof str === 'string' ? str.toLowerCase() : '';
console.log(result2); // 👉️ ""

// ✅ using an if/else statement
if (typeof str === 'string') {
  const result3 = str.toLowerCase();
} else {
  console.log('str is not a string');
}

const result4 = (str || '').toLowerCase();
console.log(result4); // 👉️ ""

We used the logical OR (||) operator to provide an empty string as a fallback if the value of the variable is falsy (e.g. null).

index.js

Copied!
const example = null;

const str = example || '';

console.log(str.toLowerCase()); // 👉️ ''

The second example uses the optional chaining (?.) operator, which short-circuits returning undefined if the value to the left is null or undefined.

index.js

Copied!
const str = null;

const result = str?.toLowerCase() || '';

console.log(result); // 👉️ ''

If the str variable stores a nullish value, the optional chaining (?.) operator will short-circuit returning undefined.

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

index.js

Copied!
const str = null;

const result = typeof str === 'string' ? str.toLowerCase() : '';

console.log(result); // 👉️ ''

If the value to the left of the question mark is truthy, the operator returns the value to the left of the colon, otherwise the value to the right of the colon is returned.

In the fourth example, we use a basic if/else statement to make sure we only call the String.toLowerCase method if the value is a string.

index.js

Copied!
const str = null;

if (typeof str === 'string') {
  const result = str.toLowerCase();
  console.log(result);
} else {
  console.log('str is not a string');
}

The last example initializes the value for the str variable right before calling the toLowerCase() method.

index.js

Copied!
const str = null;

const result = (str || '').toLowerCase();
console.log(result); // 👉️ ""

We provided an empty string as a fallback in case the value of the str variable is falsy (e.g. null).

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

TypeError: Cannot read Property 'toLowerCase' of Null in JS

TypeError: Cannot read Property 'toLowerCase' of Null in JS #

Borislav Hadzhiev