DEV Community

Anonymous Functions vs Named Functions vs Arrow Functions

Analogy | Absence | Example on April 13, 2021

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 a...
Read full post
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?