Is there any difference between var name = function() {} & function name() {} in Javascript?

Question

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

Suppose we are inside a function and not in the global namespace.

function someGlobalFunction() {
  var utilFunction1 = function() {
  }

  function utilFunction2 () {
  }

  utilFunction1();
  utilFunction2();

}

Are these synonymous? And do these functions completely cease to exist when someGlobalFunction returns? Should I prefer one or the other for readability or some other reason?

Answer 1

They are mostly the same.

utilFunction1 will only be available after it has been declared. utilFunction2 is hoisted to the top of the function, so can be used before it is defined.

function someGlobalFunction() {
  utilFunction1(); // Error: untilFunction1 is undefined :(
  utilFunction2(); // Works

  var utilFunction1 = function() {
  }

  function utilFunction2 () {
  }
}

Unless they are trapped in a closure, both will cease to exist when someGlobalFunction returns.

I prefer to use the method used to declare utilFunction2, but it's up to you.

Declarations of the form utilFunction2 (which are called Function Declarations) have the benefit of being named (i.e. showing up as utilFunction2) in your-favourite-debugger^TM, where as utilFunction1 (called Function Expressions) would just show up as an anonymous function.

---

For completeness, you also have the form;

var utilFunction3 = function utilFunction4() {
    // blah
};

... which is called a named function expression, which has weird properties (and bugs (in older versions of IE)) of its own.

Answer 2

Yes, they are quite different:

• utilFunction1 has no name, so if it throws an exception, your debugging tool will only tell you that an anonymous function threw up
• utilFunction2 will be available in the scope of the function even before that line is reached (as fletcher noted)
• using the utilFunction2 notation can cause odd behavior in certain circumstances in IE.

Ex:

if (true) {
  function utilFunction() {
    return true;
  }
} else {
  function utilFunction() {
    return false;
  }
}

utilFunction(); // returns false in IE, true everywhere else

IE takes the function scope issue to the extreme, effectively evaluating functions, even if there is no code path to them!

Answer 3

Congratulations! You've found the situation where Function Hoisting gets involved.

var foo = function() { };

is quite different than

function foo() { };

For all the reasons noted elsewhere, plus one.

The second example will be "hoisted" - it will be available anywhere within the current closure (usually the current function). Even before it's declared within said closure.

Something like this would work:

function foo() {
    bar();
    function bar() { alert('baz'); }
}

Whereas something like this would most definitely not:

function foo() {
    bar();
    var bar = function bar() { alert('baz'); };
}

You get an error in this second example, because bar has not been defined yet. If you swap the two lines in the function foo, that example will work.

Douglas Crockford advocates using this second method, because it doesn't contain a hidden behavior like hoisting - your code does exactly what it says it'll do, no tricks involved.