SetTimeout passed a named function against an anonymous function

Question

On the MDN page for window.setTimeout I find this example when a named function is passed to window.setTimeout:

 var timeoutID; function delayedAlert() { timeoutID = window.setTimeout(slowAlert, 2000); } function slowAlert() { alert("That was really slow!"); } function clearAlert() { window.clearTimeout(timeoutID); } 

In the code that I support, I came across the equivalent of this example when an anonymous function is declared when it is passed to window.setTimeout :

 var timeoutID; function delayedAlert() { timeoutID = window.setTimeout(function(){ alert("That was really slow!"); }, 2000); } function clearAlert() { window.clearTimeout(timeoutID); } 

Is there a difference between the two ways to delay notification? I trust MDN more than the code I work with, so I want to understand why MDN formulated its example with a separate function declaration.

edit : Thanks @TravisJ @ jfriend00 @PlatinumAzure for the clear and helpful answers.

Answer 1

Actually there is not much difference if it is not done much. An anonymous function will use a slightly inconsequential amount of memory than a separate function.

The reason is that the declaration of an individual function will be used essentially as a pointer so that it can be reused. However, an anonymous function will need to be created each time. This is a very small difference.

The main difference is the definition of the area and parameters. You cannot pass parameters to a function pointer. Is a function inside a timeout required to exchange an area with a parent? If so, then an anonymous function may be more worthwhile than a declared function in another area. General - pass this .

 var that = this; window.setTimeout(function(){ //keep in mind this anonymous function `this` will be window showAlert(that.message); },2000; 

To send a message, for example, if your notification was function showAlert(msg) , you will need to use the anonymous function window.setTimeout(function(){showAlert("hello");}, 2000); .

What you really want to avoid is a string. For example,

 window.setTimeout("slowAlert()", 2000); 

This is considered bad practice because the function will be built on the basis of a string similar to using eval .

Answer 2

There is no functional difference, since you have the option to use the built-in anonymous function compared to a separately declared named function. Both will work the same.

Benefits of anonymous function:

• There is no symbolic name in any namespace in which you work. If this is a global namespace, it may be important NOT to pollute the global namespace or risk colliding names with third-party libraries or other developers in the project.
• The code is locally readable inline - the reader does not need to look for this named function to see exactly what should happen when the callback is called.
• A built-in function can access variables in the current area (sometimes very useful).

Advantages of the named function:

• A named function can be called on its own for other purposes (if useful).
• In some cases, deeply nested functions or really long functions may be more readable so as not to put something inline, so that the length of the implementation does not interfere with the readability of the surrounding code.

FYI, a built-in declared function, can also have a name if necessary, so the two forms can also be mixed.

---

My personal choice is to use the built-in anonymous function if there is clearly no reason, and I choose this for the benefits of the anonymous function mentioned above.

Answer 3

Both approaches will work and are functionally equivalent.

My suggestion was to use a named function if that function is long and could make the code more difficult to read if displayed in a string, and use the built-in anonymous function for fast single-line ones. But honestly, it is up to you.