How to capitalize an array of strings in JavaScript

Key takeaways:

• The toUpperCase() method is essential for converting strings to uppercase and is widely supported across browsers.

• Capitalization the array of strings is achieved using the for, while, Array.map(), and Array.forEach() methods.

• Understanding different looping techniques helps in efficiently capitalizing strings in an array.

• JavaScript provides powerful methods for text manipulation, making it easy to transform arrays of strings.

JavaScript provides powerful methods to manipulate text, allowing us to easily transform arrays of strings. Capitalizing each word in an array is a common task, often useful in web development when formatting user input, titles, or other display elements. In this Answer, we’ll learn several ways to capitalize an array of strings, making our code clean and efficient.

Understanding the goal

Imagine we have an array of strings that we want to transform so that each word starts with an uppercase letter:

Our target result would look like this:

Understanding the toUpperCase() method

The toUpperCase() method in JavaScript is a built-in string function that converts all the characters of a string to uppercase. It's non-destructive, meaning it doesn’t modify the original string but returns a new string with all letters capitalized. Since it’s widely supported across browsers, toUpperCase() is reliable for ensuring consistent uppercase formatting.

Capitalizing the string in arrays

There are several ways to capitalize an array of strings in JavaScript. Some of the common approaches include the following:

• Using a for loop

• Using a while loop

• Using the Array.map() method

• Using the Array.forEach() method

Method 1: Using a for loop

A for loop is a programming construct that is used to execute a block of code a fixed number of times until a specific condition is met. The for loop consists of three parts separated by semicolons.

Code example

The following example shows how to capitalize an array of strings in JavaScript using a for loop:

In the above code:

• Line 1: We declare a constant variable named array and assign it to an array of four string elements.

• Line 2: We declare a constant variable named newArray and assign it to an empty array.

• Line 3: We use a for loop to iterate over the array. We initialize a variable i and set it to a value of 0. We set the condition that the loop should continue as long as i is less than the length of the array and increment i by one after each iteration.

• Line 4: We declare a variable called capitalizeArray and assign it to the capitalized version of each string element in the array. The toUpperCase() method is called on array[i] to convert the string to uppercase.

• Line 5: We use the push() method to append each value of capitalizeArray to newArray.

• Line 7: We log the output of newArray to the console, which contains the capitalized versions of the original strings from array.
  

Method 2: Using a while loop

A while loop executes a block of code repeatedly as long as a specified condition remains true.

Code example

The following example shows how to capitalize an array of strings in JavaScript using a while loop:

In the above code:

• Line 1: We declare a constant variable named fruitsArray and assign it to an array of five string elements.

• Line 2: We declare a constant variable named newFruitsArray and assign it to an empty array.

• Line 3: We use the variable i which is initially set to the value of 0 to access each string element in the array during the loop.

• Line 4: We declare the while loop, which continues as long as i is less than the length of fruitsArray.

• Line 5: We access each element at the current index i in fruitsArray. We use the toUpperCase() method to convert each string element to uppercase. Then, we append each capitalized fruit name to newFruitsArray using the push() method. 

• Line 6: We increment the value of i by one after each iteration of the loop.

• Line 8: We log the output of newFruitsArray to the console, which contains the capitalized versions of the original items in fruitsArray.

Method 3: Using the Array.map() method

The Array.map() method is a JavaScript method that iterates over each element of an array, executes a declared function on each element, and returns a new array.

Code example

The following example shows how to capitalize an array of strings in JavaScript using the Array.map() method:

In the above code:

• Line 1: We declare a constant variable named countries and assign it to an array of four string elements.

• Line 2: We declare a constant variable named newCountriesArray and assign it the result of calling the map() method on the countries array. We use the map() method to iterate over each element of the countries array, modify them based on the provided callback function, and create a new array. We use the callback function country => country.toUpperCase() to take each country element from the countries array, convert it into uppercase using the toUpperCase() method, and return the capitalized value.

• Line 3: We log the output of newCountriesArray to the console, which contains the capitalized versions of the original country names from the countries array.

Method 4: Using the Array.forEach() method

The Array.forEach() method is a JavaScript method that iterates over each element of an array and performs a specified action or function on each element without returning a new array.

Code example

The following example shows how to capitalize an array of strings in JavaScript using the Array.forEach() method:

In the above code:

• Line 1: We declare a constant variable named nameArray and assign it to an array of five string elements.

• Line 2: We declare a constant variable named newNameArray and assign it to an empty array which will be used to store the capitalized names.

• Line 3: We use the forEach() method to iterate over each element of nameArray and to execute a callback function for each element in the array, where name represents an individual element in nameArray.

• Line 4: We convert each element of nameArray to uppercase using the toUpperCase() method, and we assign each value to a new variable capitalizedNameArray.

• Line 5: We use the push() method to append each value of the capitalizedNameArray to the newNameArray. This process is repeated for each of the elements in nameArray and stored in newNameArray.

• Line 7: We log the output of newNameArray to the console, which contains the capitalized versions of the original items from nameArray.

When to use each method

Let’s discuss when to use which method for capitalization of an array of strings.

• map() with toUpperCase(): Great for creating a new array with capitalized values.

• for or while loop: Handy when modifying the original array directly.

• forEach(): Efficient for in-place updates without needing a new array.

You can explore our JavaScript Catalog to learn everything from basics to advanced concepts!

Knowledge test

Let’s attempt a short quiz to assess your understanding.

Conclusion

Capitalizing an array of strings in JavaScript is a fundamental skill that can enhance the readability and presentation of text in web applications. Whether using loops or built-in array methods, JavaScript offers flexible solutions to this common task. By practicing these methods, we can write cleaner, more efficient code that meets the needs of modern web development.