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:

<!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> 

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:

<!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> 

Output:

My Personal Notes

Recommended Posts: