What's the point of named arrow functions?

JavaScript
1

I was introduced to arrow functions, or anonymous functions in Learn Basic String and Array Methods by Building a Music Player step 11.

It said

An arrow function is an anonymous function expression and a shorter way to write functions. Anonymous means that the function does not have a name. Arrow functions are always anonymous.

That I understood. But then it said

To create a named arrow function, you can assign the function to a variable…

And I thought that it’s ironic that the first thing I do after learning about nameless functions is how to name them. I understand that it’s not the function that has a name, but the variable that refers to it. I thought it would be later explained what the benefits are of creating a function this way, which is seemingly pointless.

I’m on Step 27 now and I still haven’t been explained why I should be creating nameless functions just to instantly give them a name. It says

Start by creating an arrow function called sortSongs

Which is, yet again, appears to me ironic.

It is not a complaint. I appreciate the course and greatly enjoy it. I just want someone explain to me what I understand wrong? So far it seems although I could just have created normal functions the way I did in previous units and there was no reason to create arrow functions, beside the times when I didn’t assign them to a variable. Is it just a stylistic choice or there is more to it?

1 Like
2

I consider it more of a style choice than anything else to be honest.

It does take up less space than a regular function and can be easier to read.

1 Like
3

If a function is not bound to an identifier, you can’t call it or pass it around as a value. It can be called for you, as in the case of callbacks for say array methods (lambda function).

Assigning an arrow function to a variable doesn’t really name it. It just stores the function definition inside a variable, and if a variable contains a function definition it is callable () and can be passed around as a value.

let identifier;
identifier = () => {};

identifier(); // callable

[].map(identifier); // callable
[].map((el, index) => identifier(el, index)); // callable

[].map(() => {}); // lambda

You can’t really “name” arrow functions, they are always “anonymous”. For normal function expressions, you can “name” them, but it doesn’t serve much purpose other than for referencing the function inside itself.

Named function expression

// anonymous function expression
const fn = function() {}

// named function expression
const fn = function fnName() {}

// anonymous function expression, arrow function
const fn = () => {}
1 Like
4

Great observation! The irony of naming an anonymous function right away is definitely amusing. The main reason for using arrow functions is their concise syntax and lexical this behavior, which can be useful in certain contexts like callbacks or event handlers. While they might seem redundant when assigned to variables, they help keep code cleaner and more readable. Keep going—these nuances will start making more sense as you progress!

5

The terminology used in the step is just wrong.

It starts out correct, by saying an arrow function is always anonymous, but then processes to call binding the definition to a variable “naming”. That doesn’t name the function, it just assigns its definition to a variable.

A function name is part of the definition. You can’t add a name to an arrow function definition.

If you could, it would look like this:

const fn = name() => {}

Which isn’t valid syntax, and the name is parsed as a parameter Uncaught SyntaxError: Malformed arrow function parameter list

const fn = name => {}
1 Like
6

if someone can create an issue for this it would be great, so it can be fixed

1 Like
7

I opened an issue for it.

2 Likes
8

Thanks for all the answers. Yeah, I understand that the text in the course is a bit misleading,. I was trying to understand if there is any advantage of using arrow functions as opposed to just regular ones. For now to me it really seems just like a style choice. Although I heard something about them having different behaviors when it comes to this, and they supposedly make handling it simpler. I’m not that far into the course yet, so for now I’ll assume it’s just “the fancy way”.