How to get the longest string in an array using JavaScript ?

The task is to get the longest string from the array. Here a few of the most used techniques discussed with the help of JavaScript. In this article, we will use two JavaScript methods sort() method and the reduce() method to find out the longest string the array. Both the approach are described below with the example.

Approach 1: In this approach we will use .sort() method which calls a function on every 2 elements of the array. It takes ‘a’ and ‘b’ 2 arguments and compares their length. If the answer is positive then ‘b’ is greater else ‘a’ is greater. This method arranges the elements in the decreasing order of their length and we can access the first element by [0].

  • Example: This example implements the above approach.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            How to get the longest string
            in an array using JavaScript ?
        </title>
          
        <style>
            body {
                text-align: center;
            }
            h1 {
                color: green;
            }
            #geeks{
                font-weight: bold;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
          
        <p>
            Click on the button to get the
            longest string in the array.<br>
            <b>Array = [
                    "A_Copmuter_Science_Portal", 
                    "GeeksforGeeks", 
                    "GFG", 
                    "geeks"
                ]
            </b>
        </p>
          
        <button onclick="gfg_Run()">
            Click Here
        </button>
          
        <p id="geeks"></p>
          
        <script>
            var el_down = document.getElementById("geeks");
              
            var arr = [
                "A_Copmuter_Science_Portal", 
                "GeeksforGeeks",
                "GFG", 
                "geeks"
            ];
              
            // It compares the length of an element with
            // every other element and after sorting
            // them in decreasing order it returns the
            // first element.
            function gfg_Run() {
                el_down.innerHTML = "'" + 
                        arr.sort(function(a, b) {
                    return b.length - a.length;
                })[0] + "' is the longest string"
                        + " in the array.";
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Approach 2: In this approach we will use .reduce() method which calls a function on every 2 elements of the array. It takes ‘a’ and ‘b’ 2 arguments and compares their length. It returns the elements which has its length greater than every element.

  • Example: This example implements the above approach.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            How to get the longest string
            in an array using JavaScript ?
        </title>
          
        <style>
            body {
                text-align: center;
            }
            h1 {
                color: green;
            }
            #geeks{
                font-weight: bold;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
          
        <p>
            Click on the button to get the
            longest string in the array.<br>
            <b>Array = [
                "A_Copmuter_Science_Portal", 
                "GeeksforGeeks", 
                "GFG", 
                "geeks"
                ]
            </b>
        </p>
          
        <button onclick="gfg_Run()">
            Click Here
        </button>
          
        <p id="geeks"></p>
          
        <script>
            var el_down = document.getElementById("geeks");
              
            var arr = [
                "A_Copmuter_Science_Portal", 
                "GeeksforGeeks",
                "GFG", 
                "geeks"
            ];
              
            // It compares the length of a element with
            // every other element and return it if its
            // greater than every other element.
            function gfg_Run() {
                    el_down.innerHTML = "'" + 
                    arr.reduce(function (a, b) { 
                        return a.length > b.length ? a : b; 
                    }) + "' is the longest string"
                        + " in the array."; 
                }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.