What's the difference in those declarations (in JavaScript)?

Question

Possible Duplicate:
Javascript: var functionName = function() {} vs function functionName() {}

In Javascript I can write:

function TheFunc(arg) {
   ...
}

or

TheFunc = function(arg) {
   ...
}

or

TheFunc : function(arg) {
   ...
}

What's the real difference and when should I use which?

Answer 1

The first kind of function syntax is usually used when you want to declare local functions.

example:

function doSomething() {

   function doSomethingElse() {
       alert( "doing something else now..." );
   }

   doSomethingElse();
}

The second kind of function syntax is practically the same as the first kind, but it enables you to bind it to a global object from inner scope: i.e. window.TheFunc = function( arg ) {...}

The third kind of function is actually a function declaration in literal object context. Usually called a callback in JSON. An example of this would be:

var myObject = {
  myNumber: 1,
  myBoolean: false,
  myFunction: function(arg) { return this.myBoolean; }
};

alert( myObject.myFunction() ); // will alert "false"

Of course, you could also do this the more explicit way:

var myObject = new Object();
myObject.myNumber = 1;
myObject.myBoolean = false;
myObject.myFunction = function(arg) { ... };

Answer 2

You should check out this in-depth discussion of various way to define functions in JS, and the difference between them.

Answer 3

One difference between the first and second syntax that's not mentioned (not in the linked questions as well) is that if the function returns a function object the results of using 'TheFunc' will be quite different

TheFunc = function(arg) {
  return function(x) {
    return arg+x;
  }
}(5);
res = TheFunc(2); // res == 7

making it equivalent to

TheFunc = function(5) {
  return function(x) {
    return 5+x;
  }
}
res = TheFunc(2); // res == 7

because the function was anonymous. While

function TheFunc(arg) {
  return function(x) {
    return arg+x;
  }
}

byFive = TheFunc(5);
res = byFive(2); // res == 7

would have the same result, but making the function factory reusable.

The practical uses won't be that clear in these examples, however it can be indispensable, for example, in situations where a complex hook system exists built around callback based calls - such as systems with plug-ins:

// state object
function state(args) {
  this.parse = function(data){
    data = this.pre_parser(data);

    // go on transforming data

    return data;
  }
}
state.prototype.pre_parser_factory = function(options){
  ...
}

var st = new state(args);
async_call( function(data, options){
              st.pre_parser = st.pre_parser_factory(options);
              res = st.parse(data);
            })