What is the best practice to add functions to a function in JavaScript?

Question

I have an occurence where I want to have a main js-file with one resize function and specific files that can add workload to the main file without changing the mainfile and manually calling functions.

Lets say I have an object literal

var App = {
 resize: function(){
 // Code should be executed here
 },
 addResize: function(){
 // ?
 }
}

and I want a function to add code to the resize function which dynamically adds workload to the resize function (which gets called on window resize):

App.addResize(function(){ ... });

The first thing that came to my mind is to store the anonymous functions from addResize to an array and iterating over it in the resize function, but that doesn't feel like doing a best-practice:

var App = {
 resizeFunctions = [];
 resize: function(){
 // iterate over resizeFunctions and call each one
 // here I define throttling/debouncing ONCE
 },
 addResize: function(fn){
 this.resizeFunctions.push(fn);
 }
}
window.onresize = App.resize();
App.addResize(fn1);
App.addResize(fn2);

Is there a better way?

• MMM: Do I understand this correctly: you want to extend your object from a different file? Define App in one file, and then a function that belongs to App in another? Or do you want to make addResize() do more things, defined in a separate file?
• Nevett: The correct answer will depend on a few things: Does each other piece of work need to happen in a specific order? Do the functions need access to specific data within the App 'class'? Will they be commonly added/removed on a case-by-case basis, or is it a one-time setup with all future calls to resize() working in the same way?
• Thomas Strobl: I want different files to tell the App-Object what should be done when calling App.resize without touching the file where App is defined. But it's a one-time-setup on page load. Kinda like modules in a system.
• MMM: So, only one file decides what resize does? It's not a combination of several files?
• Thomas Strobl: Well App.resize gets called when the window is resized and the work to be done should be defined externally by calling addResize which adds a to-be-executed-function to App.resize

Answer 1

as you are referring to one function, ie. a resize function, I assume that you are looking for function overloading:

Function overloading in Javascript - Best practices
http://ejohn.org/blog/javascript-method-overloading/

If you want to extend the functionality of a set of methods that are all related to a single parent-object into different child objects, I would look into prototypal inheritance.
It allows you to define re-define the parent methods for each of the child-objects.

• Thomas Strobl: Thanks for the resource, but how does App.resize store the functions that should be called everytime App.resize gets called?
• Trace: Check if the link that I've added is useful for your purpose.
• Trace: "Better" only depends on your needs. If it works for you, and you feel that it will make your code more readable and maintainable in this fashion without giving up, then it's probably better. Depending on what the resize function does, you don't have to overload the function with an anonymous function. Depending on your needs, you can also overload the resize function with optional parameter values and manage the function accordingly.

Answer 2

Do you want to overwrite the existing function? Then you can just do this:

App.addResize = function(){}

• Thomas Strobl: Not really, kind of appending the anonymous functions from addResize.
• WhiteFang: Is this what you are looking for? stackoverflow.com/questions/1659219/…

Answer 3

App.addResize(function(){ ... });

would pass the function to addResize as an attribute but not add it to it. You could do

App.addResize.newFunction = function(){ ... };

Where newFunction is the name of the function

• Thomas Strobl: I don't seem to find any documentation of .newFunction on the interwebz, anyone to aid?
• pstenstrm: newFunction is just the name of the method. It's the same as App.addResize["newFunction"]

Answer 4

You can treat your object literal as array.

App["resize"] = function(){
 //Code goes here
}

__

Or

App.resize = function(){
//Code here
}

Both are equally good. These will update the definition of resize

If you want to add some new method, then too the same syntax will work.

App["myNewMethod"] = new function(){
 //Code here
}

Edit after OP's comment

var oldFun = App["resize"]; // or may be store this in App itself
App["resize"] = function(){
 //Pre-processing 
 // Now call original resize method
 oldFun(); //If resize method used method argument then use oldFun.apply( this, arguments );
 //Post processing 
}

• Thomas Strobl: That overwrites the original definition, right? I kinda want to extend it with new code.
• Thomas Strobl: I see where you're going, but ideally for performance reasons App.resize should only be called once with all the workload generated by addResize.