Difference between “anonymous function” and “function literal” in JavaScript?

Question

The book Learning JavaScript defines anonymous functions as follows...

Functions are objects. As such, you can create them - just like a String

Answer 1

I think a broader and more accepted definition of an anonymous function is a function that is created without a name.

Answer 2

Function expressions and function declarations

Since you are interested in functions, here is some important stuff to know.

var abc = function() { ... } is known as a function expression. The variable will be assigned that anonymous function at execution time, though its variable declaration will be hoisted to the top of the current execution context (scope).

However, a function expression can be given a name too, so that it can be called within its body to make it recursive. Keep in mind IE has some issues with this. When you assign it a name, it is most definitely not an anonymous function.

A function such as function abc() { ... } is known as a function declaration. Its definition is hoisted to the top of its scope. Its name is available within it and its parent's scope.

Further Reading.

---

Your Example

It is an anonymous function, but assigned to the variable sayHi.

As Šime Vidas mentions, a new Function object is instantiated with the new operator, and the arguments and function body are passed in as strings. The resulting object is assigned to sayHi.

The real world use of creating a function using this method is rare (though it may be just to help show that functions are objects). I also believe passing its arguments list and function body as a string will invoke an eval() type function, which is rarely good when a much better construct is available.

Also, functions created with Function do not form a closure.

I would only use this method if for some reason I needed to create a Function with its arguments and/or body only available to me as a string.

In the real world, you'd do...

var sayHi = function(toWhom) {
   alert('Hi' + toWhom);
};

Also refer to comments by Felix and Šime for good discussion and further clarification.

Answer 3

An anonymous function is simply a function with no name.

function(a, b){
  return a + b;
}

The above code would be useless as it has no name to which you could call it with. So they are usually assigned to a variable.

var func = function(a, b){
  return a + b;
}

This is helpful because you can pass an anonymous function to another function or method without having to create the function before hand, as demonstrated below.

function bob(a){
  alert(a());
}

bob(function(){
  return 10*10;
})

Answer 4

This:

new Function("toWhom", "alert('Hi' + toWhom);")

and this:

function(toWhom) { alert('Hi' + toWhom); }

are two expressions that produce the same result - they return a new anonymous function object.

The second expression (and only the second expression) is called a function expression. You may also call it a function literal (although we could argue that a function declaration is also a function literal).

Answer 5

function foo(){
    alert("i'm foo, nice to meet you!");
}
var bar = function(){
    alert("I am an anonymous function assigned to the variable \"bar\"");
}