CODEWITHSUNDEEP
javascriptjqueryobject
Kaushal Khamar
Kaushal Khamar

Reputation: 2125

What is difference between function FunctionName(){} and object.FunctionName = function(){}

Today while working my mind was stack at some point in javascript.

I want to know that what is basic difference between 

function FunctionName(){
    //Code goes here;
}

And

var MyFuncCollection = new Object(); 

MyFuncCollection.FunctionName = function(){
    //Code goes here;
}

Both are working same. Then what is difference between then. Is there any advantage to use function with object name?

I have read Question. But it uses variable and assign function specific variable. I want to create object and assign multiple function in single object.

Upvotes: 0

Views: 873

Answers (4)

ydaniv
ydaniv

Reputation: 1289

The first:

function functionName (){
    //Code goes here;
}

Is a function declaration. It defines a function object in the context it's written in.

Notice: this doesn't have to be the global context and it doesn't say anything about the value of this inside it when it's invoked. More about scopes in JavaScript.

Second note: in most style guides functions are declared with a capitalized name only if it's a constructor.

The second:

var myFuncCollection = {}; 

myFuncCollection.functionName = function () {
    //Code goes here;
};

notice: don't use the new Object() syntax, it's considered bad practice to use new with anything other then function constructors. Use the literal form instead (as above).

Is a simple assignment of a function expression to a property of an Object.

Again the same notice should be stated: this says nothing about the value of this when it's invoked. this in JavaScript is given a value when the function object is invoked, see here for details.

Of course, placing a function on an Object help avoiding naming collisions with other variables/function declarations in the same context, but this could be a local context of a function, and not necessarily the global context.

Other then these differences, from the language point of view, there's no difference whatsoever about using a bunch of function declarations or an Object with bunch of methods on it.

From a design point of view, putting methods on an Object allows you to group and/or encapsulate logic to a specific object that should contain it. This is the part of the meaning of the Object Oriented Programming paradigm.

It's also good to do that when you wish to export or simply pass all these functions to another separate module.

And that's about it (:

Upvotes: 0

Jesse
Jesse

Reputation: 2830

One main advantage I always find is cleaner code with less chance of overwriting functions. However it is much more than that.

Your scope changes completely inside the object. Consider the following code ::

Function:

function FunctionName(){
    return this;
}
FunctionName()

Returns:

Window {top: Window, location: Location, document: document, window: Window, external: Object…}

Object: 

var MyFuncCollection = new Object(); 
MyFuncCollection.FunctionName = function(){
    return this;
}
MyFuncCollection.FunctionName()

Returns:

Object {}

This leads to some nice ability to daisy chain functions, amongst other things.

Upvotes: 0

Lacrioque
Lacrioque

Reputation: 358

The short answer is, the method in object context uses the Parent Objects Context, while the "global" function has its own object context.

The long answer involves the general object-oriented approach of JavaScript, though everything in JavaScript is an object you may also create arrays with this Method.

I can't really tell you why, but in my experience the best function definition is neither of the top mentioned, but:

var myFunction = function(){};

It is possible to assign function to variables, and you may even write a definition like this:

MyObject.myMethod = function(){};

For further reading there are various online Textbooks which can give you more and deeper Information about this topic.

Upvotes: 1

Barmar
Barmar

Reputation: 780724

The first one defines a global function name. If you load two libraries, and they both try to define FunctionName, they'll conflict with each other. You'll only get the one that was defined last.

The second one just has a single global variable, MyFuncCollection. All the functions are defined as properties within that variable. So if you have two collections that try to define the same function name, one will be FuncCollection1.FunctionName, the other will be FuncCollection2.FunctionName, and there won't be any conflict.

The only conflict would be if two collections both tried to use the same name for the collection itself, which is less likely. But this isn't totally unheard of: there are a few libraries that try to use $ as their main identifier. jQuery is the most prominent, and it provides jQuery.noConflict() to remove its $ binding and revert to the previous binding.

Upvotes: 1

Related Questions