How to add method to String class in JavaScript?

The task is to add a method to the String class in JavaScript. There are two approaches that are described with the proper examples:

Approach 1: Use Object.defineProperty() method, which is used to define a new property directly to an object, or modifies an existing property. It takes 3 arguments, first is Object, Second is propertyName and last is the propertyDescription. In this example, the sum of length of strings is returned.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            Add method to String class in JavaScript
        </title>
          
        <style>
            body {
                text-align: center;
            }
              
            h1 {
                color: green;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
          
        <p id="GFG_UP"></p>
          
        <button onClick="GFG_Fun()">
            click here
        </button>
          
        <p id="GFG_DOWN"></p>
          
        <script>
            var up = document.getElementById('GFG_UP');
            var down = document.getElementById('GFG_DOWN');
              
            var str1 = "GeeksforGeeks";
            var str2 = "A Computer Science Portal";
              
            up.innerHTML = "Click on button to get the "
                        + "sum of length of the both "
                        + "strings<br>Str1 - '" + str1
                        + "'<br>Str2 - '" + str2 + "'";
              
            Object.defineProperty(String.prototype,
            'SumOfLength', {
                value: function(param) {
                    return this.length + param.length;
                }
            });
      
            function GFG_Fun() {
                const res = str1.SumOfLength(str2);
                down.innerHTML = res;
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Approach 2: Use String.prototype.propertyName to add a new method to the String class. Define a method which takes arguments passed by the object and perform the desired operation. In this example, sum of length of strings is returned.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            Add method to String
            class in JavaScript
        </title>
          
        <style>
            body {
                text-align: center;
            }
              
            h1 {
                color: green;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
          
        <p id="GFG_UP"></p>
          
        <button onClick="GFG_Fun()">
            click here
        </button>
          
        <p id="GFG_DOWN"></p>
          
        <script>
            var up = document.getElementById('GFG_UP');
            var down = document.getElementById('GFG_DOWN');
              
            var str1 = "GeeksforGeeks";
            var str2 = "A Computer Science Portal";
              
            up.innerHTML = "Click on button to get the "
                        + "sum of length of the both "
                        + "strings<br>Str1 - '" + str1
                        + "'<br>Str2 - '" + str2 + "'";
              
            String.prototype.SumOfLength = function( arg ) {
                return this.length + arg.length;
            };
            function GFG_Fun() {
                const res = str1.SumOfLength(str2);
                down.innerHTML = res;
            }
        </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.