JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.
In this article, we’ll look at how to define and use arrow functions in the cleanest way possible.
If an Expression Spans Multiple Lines, Then Wrap it in Parentheses to Make it More Readable
If we have an arrow function that has a long JavaScript expression that spans multiple lines, then we should wrap the expression in parentheses.
This applies to arrow functions that have no curly braces. For instance, if our arrow function returns an object, then we should write the following:
const foo = () => ({
a: 1
})
In the code above, we wrapped our object expression in parentheses so that we can return the object when we call the foo function.
Wrapping the object in parentheses lets us return it instead of treating it as curly braces for the function body.
Therefore, we should wrap expressions in curly braces.
Always Include Parentheses Around Parameters for Clarity and Consistency
Arrow function signatures may skip the parentheses if the signature only has one parameter. Otherwise, we must include the parentheses.
However, even though we can skip the parentheses in the signature, we probably want to include them to make our function signature more clear and to keep the code consistent with other function definitions.
For instance, we write the following code to include the parentheses in the function signature:
const foo = (a) => a + 1
Avoid Confusing Arrow Function Syntax (=>) With Comparison Operators (<=, >=)
The fat arrow in an arrow function looks like the comparison operator since they’re both made of an equal sign and the greater or less than sign.
To make arrow functions easier to distinguish from comparison expressions, we should put parentheses around our expressions.
For instance, we can write the following code for an arrow function:
const foo = (a) => (a <= 1);
We wrapped our function body and signature with parentheses so that we know that we have an arrow function.
From the parentheses, we can also clearly see that the comparison expression is a <= 1 . If we skip the parentheses, then we’ll have a hard time distinguishing between the function code and the comparison expressions.
So if we have something like the following:
const foo = a => a <= 1;
Then it’s very hard to tell where the function arrow is and where the comparison arrow is.
For longer functions, we should also have curly braces to delimit the function body as follows:
const foo = (a) => {
return a <= 1;
}
In the code above, we wrapped our function body around curly braces to make everyone clear that it’s the function body.
Enforce the Location of Arrow Function Bodies With Implicit Returns
With implicit returns of an arrow function, we have to keep the position of the expression that we’re returning is consistent. It should start in the first line of the arrow function.
However, the remaining expression can be in lines below it. For instance, we can write functions like the following code:
const foo = (a) => a + 1;
const bar = (a) => (a + 1);
const baz = (a) => (
a + 1
)
In the code above, we have the implicit return expression in the first line. We can put it in the first line in several ways.
If we wrap the expression we return in parentheses, then we can move our expression to the second line as we have in the baz function.
However, the most important thing is to keep the start of the expression we return in the first line, which includes parentheses if added.
Conclusion
With arrow functions, we have to be careful about implicit returns. The expression we return must start from the first line.
If the expression we return spans multiple lines, then it must be wrapped in parentheses.
Also, to avoid confusion with comparison operators like greater than or less than, we should wrap comparison expressions in parentheses or if we have multiline arrow functions, we wrap the whole body with curly braces.
