Anonymous Functions vs Named Functions vs Arrow Functions
Tags: javascript, beginners
Published: 2021-04-13 00:22:04

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*
```javascript
function brag(count) {
     return("I can do " + count + " pushups");
} 

console.log(brag(3)) // I can do 3 pushups
```
---

###This is an *anonymous* function, aka a function *expression*
```javascript
var brag = function(count) {
     return("I can do " + count + " pushups");
} 

console.log(brag(3)) // I can do 3 pushups
```
---

###This is an *arrow* function, a special type of _function expression_. 
```javascript
var brag = (count) => ("I can do " + count + " pushups");

console.log(brag(3)) // I can do 3 pushups
```
It's still a function expression because everything to the right of the `=` is a value that we assign to the variable `brag`. 

Note that (1) there's no curly braces used to define the code block, and (2) there's also no `return` statement. That's because an arrow function has _implicit return_, meaning the value is returned automatically. You don't actually need any parentheses either, but I left them in because they make the code more readable.

### 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.

```javascript
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.

```javascript
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 _named_ function called 'brag' (also known as a function _declaration_):

```javascript
function brag(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:

```javascript
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?

I used to think that Arrow functions were just shorter alternatives to anonymous expressions. But [Ben Calder](https://dev.to/blindfish3) correctly pointed out that "Arrow functions preserve the context of `this`, which solves some really confusing scoping issues that previously required closures or `bind(this)`. [There's some discussion of this in the MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#call_apply_and_bind)." In summary, when you use `this` inside an arrow function, it will always keep it's context and not change it to something unexpected at runtime.

In the comments, [Angela](https://dev.to/angela) mentions that you can read ["additional information on how the arrow function is different here"](https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/). Thank you Ben and Angela for nudging me to update this post!