How to override a JavaScript function
JavascriptJavascript Problem Overview
I'm trying to override a built in parseFloat
function in JavaScript.
How would I go about doing that?
Javascript Solutions
Solution 1 - Javascript
var origParseFloat = parseFloat;
parseFloat = function(str) {
alert("And I'm in your floats!");
return origParseFloat(str);
}
Solution 2 - Javascript
You can override any built-in function by just re-declaring it.
parseFloat = function(a){
alert(a)
};
Now parseFloat(3)
will alert 3.
Solution 3 - Javascript
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
Solution 4 - Javascript
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/
Solution 5 - Javascript
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