Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between "anonymous function" and "function literal" in JavaScript?

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?

like image 991
Richard JP Le Guen Avatar asked May 02 '11 13:05

Richard JP Le Guen


People also ask

What is the difference between anonymous function and normal function?

In JavaScript, an anonymous function is something that is declared without an identification. It's the distinction between a regular and an anonymous function. An anonymous function cannot be accessed after it is created; it can only be retrieved by a variable in which it is stored as a function value.

What is the difference between anonymous and named functions in JavaScript?

TL;DR Named functions are useful for a good debugging experience, while anonymous functions provides context scoping for easier development. Arrow functions should only be used when functions act as data. Functions are fun!

What is function literal in JavaScript?

A function literal is just an expression that defines an unnamed function. The syntax for a function literal is much like that of the function statement, except that it is used as an expression rather than as a statement and no function name is required.

What is anonymous function in JavaScript?

Anonymous Function is a function that does not have any name associated with it. Normally we use the function keyword before the function name to define a function in JavaScript, however, in anonymous functions in JavaScript, we use only the function keyword without the function name.


1 Answers

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.

like image 54
alex Avatar answered Oct 24 '22 08:10

alex