JavaScript: Capitalize First Letter of Every Array Item (Easy Guide)

In this blog post you’ll learn how to capitalise the first letter of all array items in JavaScript. We'll see different approach to uppercase the first letter of every array items and lowercase the remaining letter of array item.

JavaScript Method Used:

push()
toUpperCase()
toLowerCase()
charAt()
substring()
Array.forEach()

Capitalise First Letter of Each Array Item.

Approach 1: Combination of toUpperCase(), toLowerCase(), charAt(), substring(), push() method and for loop.

First we create an empty array. To store the updated array items (capitalised first letters of each array item).

Then we run a for loop. Take each item of given array and capitalise the first letter using charAt() method and toUpperCase() method and make the remaining letters of item to lowercase using substring() and toLowerCase() method and store it inside the updated_array using push() method.

JavaScript

    let fruits_array = ["mango", "banana", "apple", "pineapple", "mango", "guava", "banana", "orange"];
    // Empty array to store the updated array item.
    let upadated_array = [];
    for (let i = 0; i < fruits_array.length; i++) {
        const element = fruits_array[i];
        upadated_array.push(element.charAt(0).toUpperCase() + element.substring(1).toLowerCase());
    }
    document.write("<b>Original array: </b>",fruits_array);
    document.write("<br>");
    document.write("<b>updated_array: </b>",upadated_array);
  

Approach 2: Combination of toUpperCase(), toLowerCase(), charAt(), substring(), push(), array.map() method.

It's very similar to approach 1. We just create a new array using the map method. In the map method we run a function (which runs for all array items) that capitalises the first letter of array item and changes the remaining letter of array item to lowercase() method.

JavaScript

    let fruits_array = ["mango", "banana", "apple", "pineapple", "mango", "guava", "banana", "orange"];

    let upadated_array = fruits_array.map(function(letter, index){return letter.charAt(0).toUpperCase() +letter.substring(1).toLowerCase()})

    document.write("<b>Original Array :</b>", fruits_array);
    document.write("<br>");
    document.write("<b>Updated_array :</b>", upadated_array);
  

Approach 3: Combination of toUpperCase(), toLowerCase(), charAt(), substring(), push(), array.forEach() method.

JavaScript

    let fruits_array = ["mango", "banana", "apple", "pineapple", "mango", "guava", "banana", "orange"];
    let upadated_array = [];
    fruits_array.forEach(element => {
         upadated_array.push(element.charAt(0).toUpperCase() + element.substring(1).toLowerCase());
    });
    document.write("<b>Original Array :</b>", fruits_array);
    document.write("<br>");
    document.write("<b>Updated_array :</b>", upadated_array);
  

So that's how you can capitalise the first letter of each array item in JavaScript. If you have any query or suggestions feel free to write in the comment section.