JavaScript advantage by placing functions inside variables?

Question

I have seen recent code examples placing functions inside variables and then calling the functions like normal.

As in:

var myFunctionName = function() {
    Code Here...
}

myFunctionName();

I'm sure there are a lot of advantages with more advanced scenarios, but I'm just curious.

Answer 1

There are no advantages, you aren't placing a function inside a variable you are simply naming the function differently.

function foo() { /* ... */ }
var foo = function () { /* ... */ }

These are exactly the same except for one thing.

This works:

foo("Hello!");
/* Later on... */
function foo() { /* ... */ }

This doesn't work:

foo("Hello!");
/* Later on... */
var foo = function () { /* ... */ }

The JavaScript interpreter will preprocess all function foo's before running and push them to the top of the program so they are available but won't do that with var foo = function's.

Answer 2

This is called a function expression, which has slightly different behavior than a function declaration. Among other things, it acts differently when it comes to when you can refer to it. For instance, if you do:

var myFunctionName = function() {
    Code Here...
}

You cannot call or refer to the function until after you has been assigned, whereas

function myFunctionName() {
    Code Here...
}

Can be referred to anywhere in the same scope, even before it's declared. This is because of a feature in Javascript called "hoisting", where all function declarations are moved to the top of the code block behind the scenes.

See Also:

What is the difference between a function expression vs declaration in JavaScript?

http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting

Answer 3

There are some things you can do with a function expression that you can't with a declaration.

• it could be immediately invoked, and the return value stored in the variable

• if you're not in the global namespace, you could exclude the var keyword to create a global

---

EDIT:

Here's an example of an immediate invocation. It returns a function to the myFunctionName variable that has access to the variables and parameter scoped in the immediately invoked function.

var myFunctionName = function( v ) {
       // do something with "v" and some scoped variables
       // return a function that has access to the scoped variables

    return function() {
        // this function does something with the scoped variables
    };
}( 'someVal' );

  // now this function is the only one that has access
  //   to the variables that were scoped in the outer expression.
myFunctionName();

---

Here's an example where a function maintains a numeric value. You can repeatedly call the function, giving it a number to add to the count. It will always reference the current value, so each call is cumulative.

Example: http://jsfiddle.net/5uuLa/1/

var counter = function( value ) {

    return function( addValue ) {
        value += ~~addValue;
        return value;
    };
}( 10 ); // initialize with a value

   // each call builds on the result of the previous    
console.log( counter( 2 ) ); // 12
console.log( counter( 5 ) ); // 17
console.log( counter( 3 ) ); // 20
console.log( counter( 7 ) ); // 27
console.log( counter( 1 ) ); // 28