JavaScript toLowerCase() Function – Convert a String to Lowercase

Definition and Usage

The toLowerCase() function returns the given string converted to lowercase.

Features

The return value is a new string with all characters of the given string converted to lowercase.
Since it only returns the converted string, the original string remains unchanged.

Basic Example

JavaScript

const originalString = "Hello, World!";
const lowercaseStr = originalString.toLowerCase();

console.log(lowercaseStr); // Output: "hello, world!"

/* 👇 The original string remains unchanged. */
console.log(originalString); // Output: "Hello, World!"

To convert all characters of the given string to uppercase, use the toUpperCase() function.

Syntax

str is the string to which the toLowerCase() function is applied.
This function is intended for strings only. Calling it on a value of any other data type will result in a TypeError.

Parameters

None.

Return value

The return value is a new string with all characters of the given string (str) converted to lowercase. During this process, the original string (str) remains unchanged.

Things to Keep in Mind

The toLowerCase() function is a method that can be used only on strings. If you call this method on a value of any data type other than a string, a TypeError will occur. Such a call is not a valid operation.

JavaScript

const number = 42; // A number, not a string

try {
    let result = number.toLowerCase(); // A TypeError occurs here
    console.log(result);
} catch (error) {
    console.error(error); // TypeError: number.toLowerCase is not a function
}

In the code above, toLowerCase() is used on a number value, so a TypeError is raised. To prevent this, you should check the data type before calling toLowerCase() or convert the value to a string when necessary.

Practical Examples

The toLowerCase() function is one of the most widely used functions in JavaScript. Let's explore this function through various practical examples.

String Comparison

You can compare strings without case sensitivity by converting them to lowercase. The example below uses the toLowerCase() function to convert both strings to lowercase and then checks whether they match.

JavaScript

const str1 = "apple";
const str2 = "APPLE";

if (str1.toLowerCase() === str2.toLowerCase()) {
    console.log("The two strings are the same.");
} else {
    console.log("The two strings are different.");
}

// Output: "The two strings are the same."

Search and Filtering

This function is useful for searching or filtering values in an array without considering case differences.

JavaScript

const keywords = ["JavaScript", "HTML", "CSS"];
const userInput = "javascript";

const matchingKeywords = keywords.filter(keyword => {
    return keyword.toLowerCase() === userInput.toLowerCase();
});

console.log(matchingKeywords); // Output: ["JavaScript"]

Code Explanation
The filter() function for arrays filters elements of an array using a callback function.

File Name Handling

File names are often treated as case-insensitive. This function can be used to normalize file names by converting them to lowercase.

JavaScript

const originalFileName = "MyDocument.txt";
const normalizedFileName = originalFileName.toLowerCase();

console.log(normalizedFileName); // Output: "mydocument.txt"

Data Normalization

Data normalization is the process of standardizing data formats. It is mainly used to maintain consistency during string comparison or search operations.

JavaScript

const data = [
    {name: "Hello"},
    {name: "HelloWorld"},
    {name: "hello"}
];

const normalizedData = data.map(item => {
    return {
        name: item.name.toLowerCase()
    };
});

console.log(normalizedData);
/*
Output:
    [
        {name: "hello"},
        {name: "helloworld"},
        {name: "hello"}
    ]
*/

Code Explanation
The map() function applies a given callback function to each element of an array and returns a new array. The original array remains unchanged during this process.