javascript - Difference between assigning function to variable or not

Question

I have a worked on a couple different projects and I have seen two different ways of creating jQuery/JavaScript functions.

The first:

function testFunction(){

};

The second:

var testFunction = function (){

};

Is there a difference between these?

Answer 1

The main difference is the first one (a function declaration) is hoisted to the top of the scope in which it is declared, whereas the second one (a function expression) is not.

This is the reason you are able to call a function that has been declared after you call it:

testFunction();
function testFunction() {}

You can't do that with a function expression, since the assignment happens in-place:

testFunction();
var testFunction = function() {}; //TypeError

There is also a third form (a named function expression):

var testFunction = function myFunc() {};

In this case, the identifier myFunc is only in scope inside the function, whereas testFunction is available in whatever scope it is declared. BUT (and there's always a but when it comes to Internet Explorer) in IE below version 9 the myFunc identifier wrongly leaks out to the containing scope. Named function expressions are useful when you need to refer to the calling function (since arguments.callee is deprecated).

---

Also note that the same is true for variable declarations:

console.log(x); //undefined (not TypeError)
var x = 10;

You can imagine that the JavaScript engine interprets the code like this:

var x; //Declaration is hoisted to top of scope, value is `undefined`
console.log(x);
x = 10; //Assignment happens where you expect it to