How to override a JavaScript function

Question

I'm trying to override a built in parseFloat function in JavaScript.

How would I go about doing that?

Answer 1

var origParseFloat = parseFloat;
parseFloat = function(str) {
     alert("And I'm in your floats!");
     return origParseFloat(str);
}

Answer 2

You can override any built-in function by just re-declaring it.

parseFloat = function(a){
  alert(a)
};

Now parseFloat(3) will alert 3.

Answer 3

You could override it or preferably extend it's implementation like this

parseFloat = (function(_super) {
    return function() {
        // Extend it to log the value for example that is passed
        console.log(arguments[0]);
        // Or override it by always subtracting 1 for example
        arguments[0] = arguments[0] - 1;
        return _super.apply(this, arguments);
    };         

})(parseFloat);

And call it as you would normally call it:

var result = parseFloat(1.345); // It should log the value 1.345 but get the value 0.345

Answer 4

You can do it like this:

alert(parseFloat("1.1531531414")); // alerts the float
parseFloat = function(input) { return 1; };
alert(parseFloat("1.1531531414")); // alerts '1'

Check out a working example here: http://jsfiddle.net/LtjzW/1/

Answer 5

An override is a concept that comes from object-oriented programming, where inheritance is used to extend class methods

Javascript has classes (and prototype inheritance), but parseFloat is simply a function and not a class (or a prototype). So you would either need to make parseFloat a class method, or override the related Number.parseFloat method.

Let's explore this further. An override method, does not mutate (extend or overwrite) the original parent method. As illustrated in the following example:

class A {
  // parent method
  print() {
    console.log("class A");
  }
}

class B extends A {
  // override method
  print() {
    console.log("class B");
  }
  parentPrint() {
    super.print();
  }
}

const b = new B();
b.print(); // prints "class B" from override method
b.parentPrint(); // prints "class A" from parent method

To apply this to Number.parseFloat, we could do:

class B extends Number {
  // overrides `parseFloat` from Number class
  parseFloat() {
    super.parseFloat();
  }
}

const b = new B();
b.parseFloat();

However, modern practice is to favor composition over object-oriented inheritance.

Inheritance is regarded as confusing, fragile, and less flexible when compared to composition. React (Facebook) and Go (Google) programming languages for example, both encourage composition:

• https://reactjs.org/docs/composition-vs-inheritance.html#so-what-about-inheritance
• https://go.dev/doc/faq#inheritance
• https://go.dev/doc/faq#overloading

Therefore my basic recommendation is to use composition:

const parseFloatOverride = function () {
  return parseFloat();
};

And my extended recommendation is use composition with dependency injection, to create loosely coupled dependencies which are more suitable for unit testing.

// Inject the `Number` dependency
const parseFloatOverride = function (Number number) {
  return number.parseFloat();
};

Warning: do not overwrite the Javascript core library

Also almost every answer on this thread overwrites the parseFloat function. That's bad practice, because (a) developers expect parseFloat to work as documented, and (b) that includes developers who wrote any third-party packages you might use, that would now be corrupted. So do not overwrite the Javascript core library, and instead use composition or inheritance.

const parseFloat = function () {}; // Bad practice
const Number.prototype.parseFloat = function () {}; // Also bad practice