DEV Community

Analogy | Absence | Example
Analogy | Absence | Example

Posted on • Edited on

Anonymous Functions vs Named Functions vs Arrow Functions

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");
} 

console.log(brag(3)) // I can do 3 pushups
Enter fullscreen mode Exit fullscreen mode

This is an anonymous function, aka a function expression

var brag = function(count) {
     return("I can do " + count + " pushups");
} 

console.log(brag(3)) // I can do 3 pushups
Enter fullscreen mode Exit fullscreen mode

This is an arrow function, a special type of function expression.

var brag = (count) => ("I can do " + count + " pushups");

console.log(brag(3)) // I can do 3 pushups
Enter fullscreen mode Exit fullscreen mode

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.

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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):

function brag(count) {
     return("I can do " + count + " pushups");
} 

console.log(brag(3)) // I can do 3 pushups
Enter fullscreen mode Exit fullscreen mode

...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
Enter fullscreen mode Exit fullscreen mode

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 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." 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 mentions that you can read "additional information on how the arrow function is different here". Thank you Ben and Angela for nudging me to update this post!

Top comments (13)

Collapse
 
mail2lawi profile image
mail2lawi

Thanks so much for this guide. Very helpful for a beginner like I.

I have a few questions though.

  1. I found wording is a bit confusing in the last 2 code snippets. You are converting a function named brag to an anonymous function yet from the code it looks like the function was anonymous to begin with.

  2. And the one that I'm more curious about, is there a way to do the same conversion but using an arrow function syntax instead? I tried it and keep getting the SyntaxError: missing ) after argument list

// Arrow function works ok
var brag = (count) => {
     return ("Arrow: I can do " + count + " pushups")
}
console.log(brag (30)) // Arrow: I can do 30 pushups

// Embedded into console.log fails
console.log((count) => {
     return ("Arrow: I can do " + count + " pushups")
} (30)) //SyntaxError: missing ) after argument list
Enter fullscreen mode Exit fullscreen mode

Is there a rule against this kind of convention?

Collapse
 
mathlete profile image
Analogy | Absence | Example • Edited

@mail2lawi You are 100% correct! I meant to write a named function, but I wrote an anonymous function instead. I have now corrected it, thanks to you!

Collapse
 
badgamerbad profile image
Vipul Dessai

here the IIFE syntax is incorrect, i.e. the round brackets around the arrow function are missing

// Embedded into console.log fails
console.log(((count) => {
     return ("Arrow: I can do " + count + " pushups")
})(30)) // Arrow: I can do 30 pushups
Enter fullscreen mode Exit fullscreen mode
Collapse
 
blindfish3 profile image
Ben Calder

Arrow functions are more (and less) than just a shorthand to anonymous functions; which make then useful in particular cases. They 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

Collapse
 
jyotirmoydeb1782 profile image
jyotirmoydeb1782

Very good answer

Collapse
 
mathlete profile image
Analogy | Absence | Example

Great point, thanks!

Collapse
 
angela profile image
Angela • Edited

I think this article really needs an update. because for people who didn't read Ben Calder's comment. the takeaway might be "Arrow functions are just shorter alternatives to anonymous expressions."

additional information on how arrow function is different here: dmitripavlutin.com/when-not-to-use...

Collapse
 
mathlete profile image
Analogy | Absence | Example

Thanks for the nudge, @angela! I've updated the post.

Collapse
 
mlefkon profile image
Marc Lefkon

Another difference on arrow vs anonymous functions I've found: it seems arrow functions are not constructors. Therefore fnC=() => {}; c=new fnC(); will error with fnC is not a constructor. While an anonymous function fnB = function() {}; b=new fnB(); will instantiate an empty { } object.

Collapse
 
alin11 profile image
Ali Nazari

Is anonymous function the same as function expression?

Collapse
 
mathlete profile image
Analogy | Absence | Example

Yup!

Collapse
 
jyotirmoydeb1782 profile image
jyotirmoydeb1782

There is a difference between arrow function and anonymous function...the explanation is not right....

Collapse
 
mathlete profile image
Analogy | Absence | Example

Care to elaborate?