Convert all Array Elements to Lowercase in JavaScript

Convert all Array Elements to Lowercase #

To convert all array elements to lowercase:

Use the map() method to iterate over the array.
On each iteration, call the toLowerCase() method to convert the string to lowercase and return the result.
The map method will return a new array containing only lowercase strings.

index.js

Copied!
const arr = ['ONE', 'TWO', 'THREE'];

const lower = arr.map(element => {
  return element.toLowerCase();
});

console.log(lower); // 👉️ ['one', 'two', 'three']

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

The map method returns a new array containing all the values the callback function returned.

We call the String.toLowerCase method on each iteration to convert the string to lowercase.

The map method returns a new array, it doesn't change the original array.

An alternative, but also very common approach is to do this using the Array.forEach method.

To convert all array elements to lowercase:

Declare a variable that will store the lowercase strings and set it to an empty array.
Use the forEach() method to iterate over the original array.
On each iteration, push the result of calling the toLowerCase() method on the string into the lowercase strings array.

index.js

Copied!
const arr = ['ONE', 'TWO', 'THREE'];

const lower = [];

arr.forEach(element => {
  lower.push(element.toLowerCase());
});

console.log(lower); // 👉️ ['one', 'two', 'three']

We achieved the same result, however this time we used the Array.forEach method.

The function we passed to the forEach method gets called with each element in the array.

We lowercase each element and push it into the new array.

This approach is a bit more manual and verbose, however it's very similar to using a for loop.

Which approach you choose is a matter of personal preference. I prefer the mapmethod, because it returns a new array and we don't have to declare an intermediary variable.

The forEach method returns undefined, so we have to perform some kind of mutation to persist the state.

The forEach method is not supported in Internet Explorer. If you have to support the browser, use the map approach instead.

Convert all Array Elements to Lowercase in JavaScript