Question

I’m trying to understand when to use anonymous JavaScript functions.

State differences between the functions? Explain when you would use each.

var test1 = function(){
    $("<div />").html("test1").appendTo(body)
};

function test2() {
    $("<div />").html("test2").appendTo(body)
}

I think the answer is that one uses anonymous function and the other doesn’t to replace an empty div element. Does that seem right?

Answer 1

In your example it really doesn’t make a huge difference. The only difference is that functions declared using function foo() { } are accessible anywhere within the same scope at any time, while functions declared using var foo = function () { } are only accessible after the code that does the assignment has run.

foo(); // ok
function foo() { ... };

bar(); // error, bar is not a function
var bar = function () { ... };
bar(); // ok

You usually use anonymous functions in cases where you don’t need a named function, or where you’re constructing objects:

arr.sort(function (a, b) { return a - b; });  // anonymous callback function

function MyObject() {
    this.foo = function () { ... }  // object constructor
}