Are object methods faster than global functions? [closed]

Question

The Issue

Cannot believe I could not find anything on this around the net, maybe I am searching for the wrong thing...

There is probably little or no difference at all, but as I am trying to optimize my code as best I possibly can, I feel it is worth asking.

Very simply, I would like to know whether defining and running a method in an object processes faster than defining and running a function globally.

Examples

Consider this:

(function($){  
    $.fn.test = function() {  
        // do something here
    };  
})(jQuery);

And this:

function test(){
    // do something here
}

My Question

Which of the above is faster and why? If there is no difference in speed then which would you advise using?

Thanks in advance

UPDATE 1

As it may be relevant, I feel it is necessary to explain why I am asking this question. I have a library that I have written over the years that contains a large variety of functions. As there are so many of them, I want to know whether they would run faster if I was to extend the jQuery object, or keep them as they are?

Answer 1

In theory, you just need to count the number of objets that must be searched to determine which will be faster. Variables are resolved against the scope chain, the script engine must first search the function's execution context, then the outer contexts, and finally the global context.

Property resolution must first find the object on the scope chain, then the property on the object or its [[Prototype]] chain.

But in practice, compiler optimisation means the above simplistic analysis is will be wrong as often as it is right, and also deliver different results in different browsers for different cases.

Generally, such optimisations deliver minuscule changes in performance and should not be considered purely for performance reasons. Design objects and methods for whatever makes sense for your application architecture, ease of maintenance and logical grouping.

Answer 2

I have done this research about a year ago and I can say that it's faster to use this.test().

But it depends on what do you need. I don't recommend to add unnecessary functions to the jQuery, if you only want to make an object for specific "widget".

Simple object oriented usage:

function Car(name) {
    this.name = name;
}

Car.prototype.startEngine = function() {
    // Start the engine...
};

Car.prototype.drive = function() {
    this.startEngine();

    // Switch the lights, fasten your seatbelt...
};


// create a new car
var bmw = new Car('BMW');

// Drive the car
bmw.drive();

Another thing what you have to understand is the environment (I hope you understand what I mean). It's better to make a fresh space of variables and functions, so there are not too many variables/functions to look for. Immagine that as a list - if it's smaller, it's faster to find things in it. So, you make a fresh "space":

(function(){
    // Your fresh space.
})();

JavaScript will try to find things in "local" space and then it will try to find things in global space. Immagine it like this:

|- global
     |- function aaa
     |- function bbb
     |- var myName
     |- your local space
           |- function ccc
           |- function aaa  It will not overwrite global function with the same name
           |- var someVariable

As you can see, in "local space" there are only 3 items, so it's faster to find things.

It's faster to call semi-global functions in local "spaces". And, if you want to do some object oriented stuff, it's better and faster to extend the "object".

UPDATE If you want to tidy up your function library, then you could group them inside an object. I don't think it would be slower.

var lib = {
    foo: function() {},
    bar: function() {},
    test: function() {}
};

lib.test();

Answer 3

When you want to know which of two approach is faster the best way is to profile them. This would give you the result pertaining to your code and not a generic concept.

In my opinion, you shouldn't be optimizing it for speed, but for maintainability and richness of the API. From your question

function test(){
    // do something here
}

is in the global scope which is always bad. You should ideally be placing those method in a namespace and the sample 1 in your questions does that as part of jQuery namespace.