Arrow function syntax without name

Hello,
In this lesson we learn that there isn’t need to use the word “function” and brackets.
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions

In this lesson we not need of parentheses when there is only one parameter.
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/write-arrow-functions-with-parameters

But in this explanation, solution2 there is this syntax where there is no name either.
https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-create-strings-using-template-literals/301200

const failureItems = arr.map(item => `<li class="text-warning">${item}</li>`);

Just the “item” parameter.
Could you please explain to me in which situations is it possible?

The code example that you provide is nothing new, it is just a standard arrow function.

Yes, a simple arrow function can be written many ways:

item => `<li class="text-warning">${item}</li>`

(item) => `<li class="text-warning">${item}</li>`

(item) => { return `<li class="text-warning">${item}</li>` }

item => { return `<li class="text-warning">${item}</li>` }

Those all do the same thing.

For parameters, if you have only one and are not destructuring or renaming or doing any type annotation (like in typescript), then you can leave the parentheses off, no problem. You can have them if you really want (and some people do like them there for consistency) but they are unnecessary. I like to leave them off.

For the curly brackets, if you have only one statement/expression, you do not need them. Whatever your statement/expression evaluates to, that is what the function will return. If you have more than one statement, then you have to wrap them in a code block (curly brackets). You also have to be careful with the leaving them off if you explicitly do not want to return a value.

Does that help?


In this lesson we learn that there isn’t need to use the word “function” and brackets.

Just to be clear, this is more than just leaving off the word “function”, this is a different type of function, with some subtle differences, especially with regards to this and the arguments object.

3 Likes

Just to be clear, this is more than just leaving off the word “function”, this is a different type of function, with some subtle differences, especially with regards to this and the arguments object.

may be I will do that futher in the training…
Thank you for explanations

In the third example, which bothered you, where the function name is omitted, is called anonymous function. It is not assigned to a variable name as there were no need to use it anywhere else on the code. It only serves as a callback argument to the map method. This is where arrow functions are often used, for their short syntax. Regular functions, where you use the function keyword can also be anonymous.
Another major difference between regular functions and arrow functions is, you first must define arrow functions, before you can call them, while regular functions can be defined further in your code and you will still be able to call them on top of it(as long as they are globally defined, or at least in the scope of the block you call them). Hope that makes sense.

Hello Sylvant, your sentence above is not clear for me. May be because of my english.
Could you please say to me more about it ?

There are different ways to define functions in JS. A “regular” function will get initialized first. Variables (if declared with var will get hoisted - the declaration, not the initialization).

func1() // works, declared and initialized
function func1() {
  console.log('howdy 1')
}

func2() // throws an error, declared but not initialized
var func2 = function() {
  console.log('howdy 2')
}

func3() // throws an error, declared but not initialized
var func3 = () => console.log('howdy 3')

If that doesn’t make sense to you yet, then don’t worry about it. You should be declaring and initializing your variables (including functions) before you use them anyway.

2 Likes

sorry for my late response. You can already see from kevinSmith example how regular function can be called before initialized, while arrow functions cannot and can only be called after they have been initialized.
Its an old feature of regular function and it can be utilized to keep the “surface” of your code on top, while have long complicated functions sorted in the bottom. This makes for certain order in your code and can make it easier for people that read your code to find the core features without going lost in the details(as long as you wrote things neatly and used clear names).
For example you might do something like:

fetchData()
compileData()
drawDataChart()

With this functions called on top of your code, its quite clear you intend to pick data from somewhere, modify it in the rightr format and then use it to draw a chart. This is enough for someone reading your code to know what the code is intended to do. From there on you can proceed with initializing the functions, which can be quite complicated and long. But like kevinSmith said, its generally accepted to define things, before you use them.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.