JS: Call a function after another without touching the original function?

Question

I am trying to extend a third party library on a specific page, but I don't want to change any of the third party code. I know the name of the functions the third party library calls when something happens, so if I want my own custom code to execute after that, how can I do that?

Third Party Library has:

function eventFinished(args){
    //library stuff here
}

Now if it was my own code I'd do something like this:

function eventFinished(args){
    //library stuff here
    MyCustomFunction();
}

However, it's not and I don't want to overwrite stock library code. So is there anyway to do the above, but without touching the original function code? I would have a reference to the function itself, but that's it.

EDIT: I should mention the declared function is available globally.

Answer 1

If there is a way for you to get a reference to the function you want to extend you can "monkey-patch" it like this:

var fnOriginalFunction = functionYouWantToExtend;
functionYouWantToExtend = function() {
    fnOriginalFunction.apply(this, arguments);

    // your code here
};

This effectively re-writes the function you want to extend in a somewhat-seamless manner.

More information about monkey-patching.

Answer 2

"I am trying to extend a third party library on a specific page, but I don't want to change any of the third party code"

This can't be done. You have to alter the code somehow to react to it unless the code provides an event emitting mechanism or something alike.

The way to approach this without affecting the library is to overwrite the function you want to extend by having it do everything it already did and add your custom behavior on top.

For example:

const Library = {
  method() {
    console.log('I am the library method');
  }
}

const unalteredMethod = Library.method;
Library.method = function() {
  unalteredMethod.apply(this, arguments);
  console.log('my custom behavior');
}

Library.method();