CODEWITHSUNDEEP
javascript
Riz
Riz

Reputation: 6686

How to override a JavaScript function

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

How would I go about doing that?

Upvotes: 150

Views: 306322

Answers (5)

tim-montague
tim-montague

Reputation: 17442

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:

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

Upvotes: 11

Anastasios Selmani
Anastasios Selmani

Reputation: 3689

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

Upvotes: 42

gen_Eric
gen_Eric

Reputation: 227310

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

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

Now parseFloat(3) will alert 3.

Upvotes: 48

David Waters
David Waters

Reputation: 12038

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

Upvotes: 272

Kyle Wild
Kyle Wild

Reputation: 8915

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/

Upvotes: 12

Related Questions