0

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.

Community
  • 1
  • 1
Kaushal Khamar
  • 2,097
  • 1
  • 17
  • 23
  • possible duplicate of [var functionName = function() {} vs function functionName() {}](http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname) – ydaniv Sep 26 '15 at 10:24
  • Not duplicate. It that question, It assign function to specific variable. I think i am creating one object and assign multiple function to object. – Kaushal Khamar Sep 26 '15 at 10:28
  • Sorry mate, it's exactly the same in JS. The only difference is that you stored that var on an object. – ydaniv Sep 26 '15 at 10:39
  • can you assign multiple function to single variable? like var funvar = function(){} and var funvar = function(){} – Kaushal Khamar Sep 26 '15 at 10:43

4 Answers4

1

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.

Barmar
  • 741,623
  • 53
  • 500
  • 612
1

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.

Lacrioque
  • 358
  • 7
  • 11
  • 1
    A function statement says nothing about the value of this inside it. It's the way it's invoked that defines it. – ydaniv Sep 27 '15 at 05:59
0

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.

Jesse
  • 2,790
  • 1
  • 20
  • 36
  • A function statement says nothing about the value of `this` inside it. It's the way it's invoked that defines it. – ydaniv Sep 27 '15 at 05:57
  • It is informative to display key differences. This has nothing to do with invoking methods. Ah nevermind. I see you downvoted everyone after you answered. ;) – Jesse Sep 27 '15 at 05:59
  • The problem with questions like this in the first place is that new developers read answers such as this one, believe that that is how `this` is defined in JS and completely miss the point of delegation and functional programming in JS. – ydaniv Sep 27 '15 at 06:01
  • In my answer, directly before the code I provided "Your scope changes completely inside the object. Consider the following code ::". If the scope did not change, please explain – Jesse Sep 27 '15 at 06:20
  • Well, that says something like "beware! dragons may lay ahead", and then you give a specific example. I find it confusing for new developers that will take this as a plain and simple explanation to things. For instance, notice how you only showed it's possible to create a fluid API with a method and not with a function. That's completely not true. – ydaniv Sep 27 '15 at 06:27
  • The code is a copy and paste of the OPs code, who had no question about any of this, in these comments or in your answer. They simply asked, the difference. You are reaching ... – Jesse Sep 27 '15 at 06:30
0

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 (:

ydaniv
  • 1,289
  • 11
  • 18