Change Case of Array Elements in JavaScript (Uppercase, Lowercase).

In this blog post you’ll learn how to change the case (uppercase and lowercase) of all array items in JavaScript. We’ll see different approaches to change the case of array elements.

JavaScript Method Used:

push()
toUpperCase()
toLowerCase()

Change the Case of Each And Every Array Item.

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

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

Then we run a for loop. Take each item of a given array and capitalise the first letter using toUpperCase() 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.toUpperCase());
    }
    document.write("<b>Original array: </b>",fruits_array);
    document.write("<br>");
    document.write("<b>updated_array: </b>",upadated_array);

  

Likewise you can convert the array item to lowercase using LowerCase() 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.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() and 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) to capitalise the array items using toUpperCase() method.

JavaScript

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

    let upadated_array = fruits_array.map(function (letter, index) { return letter.toUpperCase() })

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

  

Likewise you can convert the array item to lowercase using array.map() and LowerCase() method.

JavaScript

    // Change to lowercase.
    let fruits_array = ["mango", "banana", "apple", "pineapple", "mango", "guava", "banana", "orange"];

    let upadated_array = fruits_array.map(function (letter, index) { return letter.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() and array.forEach() method.

JavaScript

    // Change to uppercase.
    let fruits_array = ["mango", "banana", "apple", "pineapple", "mango", "guava", "banana", "orange"];
    let upadated_array = [];
    fruits_array.forEach(element => {
        upadated_array.push(element.toUpperCase());
    });
    document.write("<b>Original Array :</b>", fruits_array);
    document.write("<br>");
    document.write("<b>Updated_array :</b>", upadated_array);
  

Convert array item to Lowercase using LowerCase() and Array.forEach() method.

JavaScript

    // Change to lowercase.
    let fruits_array = ["mango", "banana", "apple", "pineapple", "mango", "guava", "banana", "orange"];
    let upadated_array = [];
    fruits_array.forEach(element => {
        upadated_array.push(element.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 change the case (uppercase and lowercase) of each array item in JavaScript. If you have any query or suggestions feel free to write in the comment section.