Why would you assign a function to a variable instead of declaring a named function?

Question

Why would I do this:

var myfunc = function() { /* code */ };

...

myfunc();

instead of this:

function myfunc() { /* code */ }

...

myfunc();

Are there any benefits of using one over the other? I have seen both examples used in different places.

Answer 1

The only difference as far as I can tell is that the anonymous function cannot call itself recursively while the named function can. There is a third type of construct that combines both of these, ie you can have a named function expression:

var myfunc = function myfunc() { /* code */ };

Answer 2

If a function is declarated normally, the function name (its identifier) will not be deleteable even if the identifier is redeclared. The identifier will only be deleted when its scope ends.

function myfunc() { /* code */ };

if (delete myfunc) { //will fail
  alert('myfunc deleted');
} else {
  alert('can not delete myfunc');
}

myfunc = null;

if (delete myfunc) { //will still fail
  alert('myfunc deleted');
} else {
  alert('can not delete myfunc');
}

var myfunc = null;

if (delete myfunc) { //will still fail
  alert('myfunc deleted');
} else {
  alert('can not delete myfunc');
}

But if a function declaration is assigned to a variable, its identifier can be deleted. This is especially useful when you need to create a global function but only use it temporarily, so that it can be deleted when it's no longer needed or to avoid possible identifier conflit with third party scripts.

var myfunc = function() { /* code */ };

if (delete myfunc) { //will succeed
  alert('myfunc deleted');
} else {
  alert('can not delete myfunc');
}

//or...
var myfunc = function myrealfunc() { /* code */ };

if (delete myfunc) { //will succeed
  alert('myfunc deleted');
} else {
  alert('can not delete myfunc');
}

Answer 3

There are a few differences, mostly pragmatic. When you 'var' a function, the normal assumption is some kind of 'locally' scoped function ( think a nested function ). When you do, function myFunction() {} , the function is mostly assumed to be globally scoped (though you could wrap this inside an anonymous function as well).

In the case of a javascript 'class', if you want to create a locally scoped function, you would have to use 'var' to declare it.

var myClass = function() {
 var test = function() {
  //This function has local scope
  }
};

Adding to the above comments, this is a simple example.

  var myVariable = resultFunction();


  function resultFunction() {
  return 1;
  }

The above code will work. But you can't do the following

 var myVariable = resultFunction();


 var resultFunction = function() {
    return 1;
 };

But you can do

 var resultFunction = function() {
    return 1;
 };

 var myVariable = resultFunction();