significance of variable and function names being the same?

Question

In some javascript code I'm seeing variables referencing functions with the same name, eg:

var Automobile = function Automobile() {
  this.someProperty = 1;
}

What's the purpose of that vs var Automobile = function() {...}

or even:

var Automobile = function AnythingBesidesAutomobile() {...}?

Debugging aid, possibly?

Answer 1

Providing a local name for a function created in a function instantiation makes it possible for the function to refer to itself independently of any external (closure) variable. Consider:

var foo = function() {
  // do something
  setTimeout(foo, 1000);
};

setTimeout(foo, 1000);

foo = 23;

Because the code inside the function relies on the external symbol "foo" to access itself, the thing will fail after the first timeout. However:

var foo = function foo() {
  // do something
  setTimeout(foo, 1000);
};

setTimeout(foo, 1000);

foo = 23;

Now it'll work, because "foo" inside the function refers to the name given after the function keyword, not the "foo" in the enclosing scope.

You're also right about it being a debugging aid. If you're setting up event handlers for example (please excuse the jQuery):

$(document).on('click', 'button', function() {
  // do all sorts of complicated stuff
});

It's nice to have a name show up in stack traces when things go wrong:

$(document).on('click', 'button', function buttonClickHandler() {
  // ...
});

Finally, this used to be problematic due to bugs, but I think a lot of that has been smoothed out in newer JavaScript runtime environments.

Answer 2

There's very little point to your first example (although there can be times when you want that), where the names are the same; a function declaration would normally (but not always) be more appropriate there:

function Automobile() {
  this.someProperty = 1;
}

Your second example makes a bit more sense, as the variable name and function name are different.

In either case, what you have there is called a named function expression. It creates a function with a true name (the one after the keyword function), at the point in step-by-step code where it appears, and also assigns a reference to that function to the given variable. The function's actual name is not added to the scope in which the expression appears but does exist within the function itself; the variable name, of course, exists in the scope in which the expression appears.

So why would you do your first example? Function declarations are not part of the step-by-step code. They cannot appear within control flow blocks (e.g., not within an if or similar), and they happen when the context in which they exist is created, before any step-by-step code is run. Sometimes you want to wait until the step-by-step execution reaches that point, in which case you use a function expression (a named one, in your case).

Side note: IE8 and earlier really mess up named function expressions, to the point where you should avoid using them in any case that may need to run on IE8 and earlier. This bug is fixed in IE9 and higher, and doesn't exist in current versions of other browsers. (Older versions of some other browsers had [different] issues with named function expressions, but not for years.)