All other ways, including ES2015’s much-touted Arrow functions produce anonymous functions. One of these ways is:
NOTE: If you tried the above code in Chrome Dev Tools, you would’ve noticed that the name of the function is “add” even in the case of anonymous function. That’s because modern-day interpreters are smart enough to recognize the name from the expression.
Now, what’s special about named functions?
Error and call stacks are a great help in debugging code. But the use of anonymous functions reduces the usefulness of the call stacks. We all have seen the infamous (anonymous) littered over the stack trace.
Of course, one can always look at the line number of the error, but with the ever-increasing pre-processing on the code (read Babel, WebPack, Browserify), this is not a reliable method.
So practically, a named function is available even before it’s declared, making the following code valid.
But the following code won’t work.
It’s fairly difficult to understand a callback function’s purpose in first glance. That’s what makes callback hell the problem it is.
Look at the following jQuery code.
The above code provides no information on what’s going to happen to the submitted form. Adding names to callbacks improves readability and acts as implicit documentation, as the following code does.