In javascript, there are two methods of declaring functions that are seen frequently. They are similar in many ways, but there are a few ways in which they are different. The first one is called a named function. This is how it looks:
function test(){
console.log('hello world!');
}The second way is by creating an anonymous function and assigning it to a variable. This is how it looks:
var test = function(){
console.log('hello world!');
}There are two main differences between these types of functions. The first is that named function are hoisted at runtime. You can find more information about hoisting in this wonderful article. This means that named functions are available anywhere in the file, no matter the order. For example:
test();
function test(){
console.log('hello world!');
}This code works, even though the function was declared after it was called. This is because named functions are hoisted to the top of the file before the code is executed, so that they are always available. This is not the case for anonymous functions assigned to variables, and the below code throws an error and does not work, because test is not defined before it is called.
test();
var test = function(){
console.log('hello world!');
}The hoisting applied to named functions has a number of benefits for code readablity. When someone else is reading your code, it makes it much easier for them if they can see the implementation upfront, then referring to function declarations below if they want more details on how they work, rather than having to wade through a bunch of context-less utility functions before finally finding the context in which those functions are used.
In addition, when there is an error inside of a function body, if it is a named function, the name of the function will appear in the stack trace, making it easier to debug. If it is anonymous, "anonymous" will appear in the stack trace, and it will be more difficult to track down.
The only potential downside to named functions is that if a developer does not understand how they work and is sloppy with their code, it's possible that they can overwrite the function by assigning a variable to the same name as the function. With a named function, it will always be overwritten since it is hoisted to the top, whereas with an anonymous function assigned to a variable, it might not be overwritten depending on where it is defined in the file. However, I actually consider this a benefit, as having a variable and a function named the same thing at different places in the same scope is always a very bad idea, and I'd like to be notified immediately by an error if that is the case so that the naming issue can be resolved.