Convert all Array Elements to Uppercase in JavaScript

Convert all Array Elements to Uppercase #

To convert all array elements to uppercase:

Use the map() method to iterate over the array.
On each iteration, call the toUpperCase() method to convert the string to uppercase and return the result.
The map method will return a new array with all strings converted to uppercase.

index.js

Copied!
const arr = ['apple', 'banana', 'cereal'];

const upper = arr.map(element => {
  return element.toUpperCase();
});

// 👇️ ['APPLE', 'BANANA', 'CEREAL']
console.log(upper);

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 that contains all of the values we returned from the function.

We call the String.toUpperCase method on each iteration to convert the string to uppercase.

The map method returns a new array, it doesn't mutate the contents of the original array.

An alternative, but also very common approach is use the Array.forEach method.

To convert all array elements to uppercase:

Create a variable that will store the uppercase strings and set it to an empty array.
Use the forEach() method to iterate over the original array.
On each iteration, convert the string to uppercase using the toUpperCase() method and push it to the uppercase strings array.

index.js

Copied!
const arr = ['apple', 'banana', 'cereal'];

const upper = [];

arr.forEach(element => {
  upper.push(element.toUpperCase());
});

// 👇️ ['APPLE', 'BANANA', 'CEREAL']
console.log(upper);

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

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

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

The forEach method returns undefined, so we need to declare a new variable that will store the state from the operations we perform.

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 Uppercase in JavaScript