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 or Array or other type - by using a constructor and assigning the function to a variable. In the following code, a new function is created using the Function constructor, with the function body and argument passed in as arguments:

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

This type of function is often referred to as an anonymous function because the function itself isn't directly declared or named.

Is this the correct definition of an "anonymous function" in JavaScript? If not, what is an anonymous function, and is there any difference between an anonymous function and a function literal?

Answer 1

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 2

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

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\"");
}