This content originally appeared on DEV Community and was authored by Analogy | Absence | Example
First you learn the syntax to create a function, and that's fine. Then you start hearing about anonymous functions, and they look a bit different and you're not entirely sure why the world needs them. Then arrow functions rear their arrow-y head and you're thoroughly confused...at least, I was. For me to better understand the differences of all three, I needed to put them side by side and compare them.
This is a named function, aka a function declaration
function brag(count) {
return("I can do " + count + " pushups");
}
brag(3) // I can do 3 pushups
This is an anonymous function, aka a function expression
var brag = function(count) {
return("I can do " + count + " pushups");
}
brag(3) // I can do 3 pushups
This is an arrow function, aka a lambda function.
var brag = (count) => {
return("I can do " + count + " pushups")
};
brag(3) // I can do 3 pushups
Note that all three of the examples above accomplish the same thing, they just use slightly different syntax.
Besides the syntax, how are they different?
Function declarations are hoisted, which means they are loaded into memory at compilation. That's why in the example below, the function call works even before the function declaration appears.
console.log(brag(3)) // I can do 3 pushups
function brag(count) {
return("I can do " + count + " pushups");
}
console.log(brag(3)) // I can do 3 pushups
Anonymous functions, on the other hand, are not hoisted. As you can see, when we call the "brag" function before the function declaration, we get an error. When we call it after the declaration, it works.
console.log(brag(3)) // TypeError: brag is not a function
var brag = function(count) {
return("I can do " + count + " pushups");
}
console.log(brag(3)) // I can do 3 pushups
Why would you use an anonymous function instead of a named function?
Sometimes you don't need to name a function because you're just going to use it as a callback to another function. Since you're not using it again elsewhere, it doesn't need a name.
For example, here we're using a function named brag:
var brag = function(count) {
return("I can do " + count + " pushups");
}
console.log(brag(3)) // I can do 3 pushups
...but we could just as well make it anonymous, like so:
console.log(function(count) {
return("I can do " + count + " pushups");
} (3)) // I can do 3 pushups
Why would you use an arrow function instead of an anonymous function?
Arrow functions are just shorter alternatives to anonymous expressions. Some people appreciate it's brevity. The drawback is that arrow functions are a bit less human-readable than anonymous functions.
This content originally appeared on DEV Community and was authored by Analogy | Absence | Example
Analogy | Absence | Example | Sciencx (2021-04-13T00:22:04+00:00) Anonymous Functions vs Named Functions vs Arrow Functions. Retrieved from https://www.scien.cx/2021/04/13/anonymous-functions-vs-named-functions-vs-arrow-functions/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.