How to override a JavaScript function ?

Last Updated : 26 Dec, 2022

In this article, we are given an HTML document and the task is to override the function, either a predefined function or a user-defined function using JavaScript.

Approach: When we run the script then Fun() function is called. After clicking the button the GFG_Fun() function is called and this function contains another function that will run.

Example 1: In this example, a function written by the user is overridden.

html

<body style="text-align:center;"> 
  
    <h1 style="color:green;" id="h1"> 
        GeeksForGeeks 
    </h1> 
  
    <p id="GFG_UP" style="font-size: 15px;  
                          font-weight: bold;"> 
    </p> 
  
    <button onclick="GFG_Fun()"> 
        click here 
    </button> 
  
    <p id="GFG_DOWN" style="color:green;  
                            font-size: 20px;  
                            font-weight: bold;"> 
    </p> 
  
    <script> 
        var up = document.getElementById('GFG_UP');     
        up.innerHTML = "Click on the button to override" 
                    + " the function."; 
          
        var down = document.getElementById('GFG_DOWN'); 
          
        function Fun() { 
            return "This is from old function"; 
        } 
          
        down.innerHTML = Fun(); 
          
        function GFG_Fun() { 
            var newFun = Fun; 
            Fun = function() { 
                return "This is from overridden function"; 
            } 
            down.innerHTML = Fun(); 
        } 
    </script> 
</body>

Output:

Example 2: In this example, a parseFloat method is overridden using the above-mentioned approach.

html

<body style="text-align:center;"> 
  
    <h1 style="color:green;" id="h1"> 
        GeeksForGeeks 
    </h1> 
  
    <p id="GFG_UP" style="font-size: 15px;  
                          font-weight: bold;"> 
    </p> 
  
    <button onclick="GFG_Fun()"> 
        click here 
    </button> 
  
    <p id="GFG_DOWN" style="color:green;  
                            font-size: 20px;  
                            font-weight: bold;"> 
    </p> 
  
    <script> 
        var up = document.getElementById('GFG_UP');     
          
        up.innerHTML = "Click on the button to override" 
                    + " the function."; 
          
        var down = document.getElementById('GFG_DOWN'); 
          
        down.innerHTML = "Floor value of '2.345' is "; 
          
        function GFG_Fun() { 
              
            // Override 
            parseFloat = function(x) { 
                return "Floor value of '2.345' is " 
                            + Math.floor(x); 
            } 
              
            // Overriding the parseFloat function and 
            // use it as Math.floor 
            down.innerHTML = parseFloat(2.345); 
        } 
    </script> 
</body>