TypeError: toLowerCase is not a function in JavaScript

# TypeError: toLowerCase is not a function in JavaScript

The "TypeError: toLowerCase is not a function" error occurs when we call the toLowerCase() method on a value that is not a string.

To solve the error, convert the value to a string or make sure to only call the toLowerCase method on strings.

Here is an example of how the error occurs.

Copied!
const str = {};

// ⛔️ TypeError: str.toLowerCase is not a function
const result = str.toLowerCase();

We called the String.toLowerCase() method on an object which caused the error.

# Only call the toLowerCase() method on strings

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

You can convert a value to a string by using the String() constructor or the toString() method.

Copied!
const num = 246;

const result1 = num.toString().toLowerCase();
console.log(result1); // 👉️ 246

const result2 = String(num).toLowerCase();
console.log(result2); // 👉️ 246

The String() constructor and the toString() method are used to convert the supplied value to a string.

# Check if the value is a string before calling toLowerCase()

Alternatively, you can check if the value is a string before calling the toLowerCase() method.

Copied!
const str = null;

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

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

We used a ternary operator to check if the str variable stores a string.

If it does, the value to the left of the comma is returned, otherwise the value to the right is returned.

You can also use a simple if statement to check if the value is a string.

Copied!
const str = 1234567;

let result = '';

if (typeof str === 'string') {
  result = str.toLowerCase();
}

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

# Convert all strings in an array to lowercase

If you want to convert all strings in an array to lowercase, use the map() method to iterate over the array and call the toLowerCase() method on each string.

Copied!
const arr = ['A', 'B', 'C'];

const result = arr.map(str => str.toLowerCase());

// 👇️ ['a', 'b', 'c']
console.log(result);

The function we passed to the Array.map() method gets called with each element in the array.

On each iteration, we use the str.toLowerCase() method to convert the current string to lowercase and return the result.

The map() method returns a new array containing the values returned from the callback function.

If the error persists, console.log the value you're calling the toLowerCase method on and use the typeof operator to check its type.

Copied!
console.log(typeof 'bobby hadz com'); // 👉️ string
console.log(typeof []); // 👉️ object
console.log(typeof 3.14); // 👉️ number

# Access property on an object or an array element before calling toLowerCase()

If the value is an object, there's a very good chance that you are forgetting to access a specific property on which you need to call the toLowerCase() method.

Copied!
// ✅ Access object property before calling toLowerCase
const obj = {
  site: 'BOBBYHADZ.COM',
};

const result1 = obj.site.toLowerCase();
console.log(result1); // 👉️ bobbyhadz.com

// -------------------------------------------
// ✅ Access an array element before calling toLowerCase

const arr = ['BOBBY', 'HADZ', 'COM'];

const result2 = arr[0].toLowerCase();
console.log(result2); // 👉️ bobby

We accessed a property in an object and an element in an array before calling the toLowerCase() method.

# Conclusion

The "TypeError: toLowerCase is not a function" error occurs when we call the toLowerCase() method on a value that is not a string.

To solve the error, convert the value to a string using the toString() method or make sure to only call the toLowerCase method on strings.