Skip to main content

How to Convert All Array Elements to Uppercase or Lowercase in JavaScript

A common data normalization task is to convert all string elements in an array to a consistent case, either all uppercase or all lowercase. This is essential for case-insensitive comparisons, cleaning up user input, or standardizing data for processing. The most direct and idiomatic way to achieve this in JavaScript is with the Array.prototype.map() method.

This guide will teach you how to use map() to create a new array with all elements converted to a specific case. We will also explain why this functional approach is superior to manual looping with forEach or a for loop.

The Core Method: Array.prototype.map()​

The map() method is the perfect tool for this job. It creates a new array by calling a provided function on every element in the original array. For our use case, the function we provide will be one that converts a string's case.

The logic:

  1. Start with an array of strings.
  2. Call .map() on the array.
  3. In the callback function for map(), take each element and return the result of calling .toUpperCase() or .toLowerCase() on it.
  4. map() will collect all the returned values into a new array.

This approach is immutable, meaning it does not change the original array, which is a key principle of modern JavaScript development.

Converting All Elements to Uppercase​

You have an array of strings and need a new array where every string is in uppercase.

For example, how to convert this array to all uppercase?

const fruits = ['apple', 'banana', 'cherry'];

Solution:

const fruits = ['apple', 'banana', 'cherry'];

const uppercaseFruits = fruits.map(fruit => {
  return fruit.toUpperCase();
});

console.log(uppercaseFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

// The original array is not changed
console.log(fruits);          // Output: ['apple', 'banana', 'cherry']
note

For conciseness, you can use an arrow function with an implicit return:

const uppercaseFruits = fruits.map(fruit => fruit.toUpperCase());

Converting All Elements to Lowercase​

The process for converting to lowercase is identical, but uses the String.prototype.toLowerCase() method.

For example, how to convert this array to all lowercase?

const names = ['ALICE', 'BOB', 'CHARLIE'];

Solution:

const names = ['ALICE', 'BOB', 'CHARLIE'];

const lowercaseNames = names.map(name => name.toLowerCase());

console.log(lowercaseNames); // Output: ['alice', 'bob', 'charlie']

Why map() is the Best Practice​

While you could achieve the same result with a forEach loop or a standard for loop, the map() method is superior for this task.

Manual forEach Method (More Verbose)​

const fruits = ['apple', 'banana', 'cherry'];
const uppercaseFruits = []; // 1. Must initialize an empty array

fruits.forEach(fruit => {
  uppercaseFruits.push(fruit.toUpperCase()); // 2. Must manually push into it
});

console.log(uppercaseFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

The map() method is better because it is:

  • More Concise: It accomplishes the goal with less boilerplate code (no need to create an empty array or use push).
  • More Declarative: map() clearly communicates that you are transforming one array into another. A forEach loop is more generic and simply means "do something for each element."
  • Immutable: map() is designed to return a new array, which aligns with functional programming principles and prevents unexpected side effects.

Conclusion​

For converting all string elements in an array to a consistent case, the Array.prototype.map() method is the definitive best practice.

  • To convert all elements to uppercase, use array.map(element => element.toUpperCase()).
  • To convert all elements to lowercase, use array.map(element => element.toLowerCase()).

This functional approach produces clean, readable, and maintainable code, and it avoids the manual and more verbose logic required by other looping constructs.

Table of Contents