Strings in JavaScript have multiple applications and use cases. This tutorial will guide you through the toLowerCase() method, which speaks for itself. It is used to convert all letters within a string to lowercase characters. Because this method focuses solely on this functionality, let's focus on it in our guide and provide you with a few exercise tasks, as follows.

Introduction and syntax

As we've mentioned in the first paragraph, the main function of the toLowerCase() method is to return the calling string value. The output you get is returned in the form of the lowercase content of a string. Syntax-wise, the toLowerCase() is written like this:

toLowerCase()

While the return of this method seems to be obvious, please note that you can't manipulate the string content using it. In other words, the content of str will remain unchanged when using the toLowerCase() method. Let's consider the most basic example:

const sentence = 'We are learning JavaScript together, as a team.';
 
console.log(sentence.toLowerCase()); // Output: we are learning javascript together, as a team.

The sentence we've entered is returned in the same sentence but using lowercase for each character. That's why you also get javascript written in such a manner.

Array with the toLowerCase() method

You can combine the strings and locate them within an array, subsequently getting a return written in lowercase. Take a look at the following example:

let arr = [{"name":"Chris"},{"name":"MICHAEL"},{"name":"bob"}]
console.log(arr[1].name.toLowerCase()); // Output: michael

In this case, the second command we use intends to return the name MICHAEL written in lowercase. As you can see in an expected output, the return corresponds to the original intent.

This example shows that you can manipulate strings and their values using the toLowerCase() method. To satisfy your curiosity, we'll also include an exercise task to learn how this method can be applied for working with an array.

Converting all Array elements to lowercase

It's technically true that you can use the toLowerCase() method to manipulate the array content. Yet, the previous example showed that we converted only a single word and returned it in lowercase. Let's review one more example, this time converting all array elements to lowercase:

const arr = ['LearNinG', 'JAVA', 'Script'];
 
const lower = arr.map(element => {
  return element.toLowerCase();
});
 
console.log(lower); // Output: [ 'learning', 'java', 'script' ]

This time, we make the most of the toLowerCase() method by converting all elements within an Array using a Map method. In other words, the function we pass using this example gets called with each element, which is a string in our case, into an array. And since we're using the toLowerCase() method as a return, the output we get is in the form of a lowercase range of strings.

When working with arrays, you can also use the toLowerCase() by applying the forEach() method. Let us show you an example using the same strings as in the previous example:

const arr = ['LearNinG', 'JAVA', 'Script'];
 
const lower = [];
 
arr.forEach(element => {
  lower.push(element.toLowerCase());
});
 
console.log(lower); // Output: [ 'learning', 'java', 'script' ]

It is no surprise that we achieved the same result with this approach. Yet, instead of relying upon the Map method, we applied the Array.forEach() method. The crucial distinction is that the function we pass gets called with each array element, lowercasing each element and pushing it into a new array.

String example

Let's review another basic example of how the toLowerCase() method works with a string. See the following code, which includes a sentence we'd be using:

const str = 'This is a sample sentence to show you an example of how this method works, right?';
 
// convert string to lowercase
const lowerStr = str.toLowerCase();
 
// print the new string
console.log(lowerStr); // Output: this is a sample sentence to show you an example of how this method works, right?

In this case, we showcase each particular step we make in the code and also highlight the return. If you use this approach step-by-step and run through a compiler, the output you get will be the same as in the indicated example.

Test yourself

  • Task 1. Use a simple toLowerCase() method to transform the following string into a lowercase sentence: ‘I am not sure whether JAVASCRIPT is a hard programming language.'

Solution:

const sentence = 'I am not sure whether JAVASCRIPT is a hard programming language';
 
console.log(sentence.toLowerCase()); // Output: i am not sure whether javascript is a hard programming language

  • Task 2. Use the toLowerCase() method with an array with three strings and the id attribute: Example1, ExAmPlE2, and EXAMPLE3 to transform ONLY the third string into lowercase.

Solution:

let arr = [{"id":"Example1"},{"id":"ExAmPlE2"},{"id":"EXAMPLE3"}]
console.log(arr[2].id.toLowerCase()); // Output: example3

  • Task 3. This time, use the toLowerCase() method with an array to get a lowercase return of each string in Task 2, this time using the Array.forEach() method:

Solution:

const arr = ['Example1', 'ExAmPlE2', 'EXAMPLE3'];
 
const lower = [];
 
arr.forEach(element => {
  lower.push(element.toLowerCase());
});
 
console.log(lower); // Output: [ 'example1', 'example2', 'example3' ]