Function declaration as var instead of function

Question

More and more I'm seeing functions being declared like

var foo = function() {

    // things
};

Instead of how I had learned, like

function foo() {

    // things
}

What's the difference? Better performance? Scope? Should I be using this method?

Answer 1

var foo = function() {} defines a variable that references an anonymous function.

function foo() {} defines a named function foo.

Either can be passed by name as function parameters and either can be instantiated if the intended use is for OOP.

At the end of the day, which one you use is largely dictated by your specific use-case (Javascript is fun like that ;)). If you end up using the former, I would strongly suggest that you name the function:

var foo = function MY_function() {}. This naming convention helps your debugger callstack not be useless.

Answer 2

function expression:

//someFunction(); //wouldn't work when uncommented
var someFunction = function(){ alert('yay'); };

The func expression in this case is anonymous but assigned to a var for reference. This is different from a labeled function statement in the following ways:

• it can't be hoisted (called before it's defined)
• new someFunction().constructor.name === 'someFunction';//false instances don't get the var name for constructor.name because a reference to the function is assigned to the var but the var, not the function, is tied to the var name

In a labeled function statement:

//someFunction(); //works when uncommented
function someFunction(){ alert('yay'); }

• hoisting works
• new someFunction().constructor.name === 'someFunction'; //true the name is tied directly to the function.

Generally speaking there's not really any great reason to do expression to var unless you want calls to fail if things get moved around or you're defining/assigning a method in one line. I actually find hoisting useful for organizing objects with internal func and method definitions at the bottom so I can get to the actual behavior of the object and do one-line public method definitions (by just assigning funcs to this. with the same name) all in one spot for ease of reference. You should always try to use labeled statements for constructors, IMO, so you can identify an object's 'type' via its constructor.

Answer 3

Your first example is an expression while the second example is a statement. Defining functions as expressions allows for more flexibility in where the definition can occur, what you can assign it to, that you can pass it as a parameter, etc...

For example:

SomeThing('abc', function(a,b) {return a*b;});

vs...

function tmp(a,b) { 
    return a*b;
}

SomeThing('abc', tmp);

More complex examples would become obcenely complicated without the function expression syntax.

Look at https://stackoverflow.com/questions/111102/how-do-javascript-closures-work

Answer 4

The main practical difference is hoisting. For example:

foo(); // alerts 'hello'
function foo() {alert('hello');}

vs

foo(); // throws an error since foo is undefined
var foo = function() {alert('hello');}

Also, this is undefined behavior

function foo(){
  if (true) {
    function bar(){}
  }
  bar();
}

while this is ok.

function foo(){
  if (true) {
    var bar = function(){}
  }
  bar();
}