Convert Array to Lowercase JavaScript

Convert Array to Lowercase JavaScript | In JavaScript, you can loop over all elements with the Array.map() method and then alter the case type of the elements with the string methods.

Here is an example of how to use the String.toLowerCase() method in conjunction with Array.map() to lowercase all items in an array.

Convert Array to Lowercase JavaScript Example

Example 1: Example to convert array to lowercase JavaScript

const arr = ['CAT', 'DOG', 'COW', 'GOAT'];
const lower = arr.map(element => {
   return element.toLowerCase();
});
console.log(lower);

Output:-

[ ‘cat’, ‘dog’, ‘cow’, ‘goat’ ]

The approach used above can be explained as:-

To change all array elements to lowercase, use the following format:

1. Iterate through the array using the map() method. 
2. For each loop, call the toLowerCase() function to change the string to lowercase and give the output.
3. The map approach will return a new array containing only lowercase characters.

We provided the code to the Array. For each element (string) in the array, the map method is called. The map technique creates a new array comprising all of the return function’s arguments. On each loop, we call the String.toLowerCase() method to transform the string to lowercase.

The map technique establishes a different array without altering the original. An alternative, but equally frequent, the option is to use the Array.forEach method.

To change all array elements to lowercase, use the following procedure:-

1. Declare a variable to hold lowercase strings and set it to an empty array.
2. Iterate through the original array using the forEach() method.Add the output of the toLowerCase() method on the string into the lower string array once each iteration.

Example 2: Let us see how to make a string array lowercase using forEach()

const arr = ['CAT', 'DOG', 'COW', 'GOAT'];
const lower = [];
arr.forEach(element => {
   lower.push(element.toLowerCase());
});

console.log(lower);

Output:-

[ ‘cat’, ‘dog’, ‘cow’, ‘goat’ ]

We got the same result as before, except on this occasion we used the array forEach technique.

For each array element, the function we gave to the forEach method is called. Each element is lowercased and added to the new array. This method is more laborious and verbose, but it is fairly similar to using a for loop.

Personal preference dictates the method you take. I prefer the mapping technique since it creates a new array without requiring us to declare an intermediary variable. Because forEach technique yields undefined, we must employ some sort of mutation to maintain the state. Internet Explorer does not support the forEach function. Use the map if you must use the browser.

Thus we saw two methods by which we can change an array to lowercase. The methods we discussed were pretty easy and minimalistic and we hope that you understood them very well.

If you enjoyed this post, share it with your friends. Do you want to share more information about the topic discussed above or do you find anything incorrect? Let us know in the comments. Thank you!

Search