Arrow Function is a new syntax format in ES6 standard, which can make Function expressions more concise. It is mainly used to write Anonymous Function expressions.

The syntax format of the arrow function can be remembered in two categories: the number of input arguments and the number of lines of the function expression. The number of input arguments classifies whether the argument parentheses (()) can be omitted, and the number of lines of a function expression classifies whether the curly braces ({}) enclosing the function body can be omitted.

Whether the parameter parentheses can be omitted to classify by the number of input parameters

  • When there is no input parameter

The parameter parentheses cannot be omitted. Such as:

const noParam = () = > {
	// Function body
};
Copy the code
  • When the number of input parameters is 1

At this point, the parameter parentheses may or may not be omitted. Such as:

const oneParam = param= > {
	// Function body
};
/* You can also omit the argument parentheses */
const oneParam = (param) = > {
	// Function body
};
Copy the code
  • When the number of input parameters is greater than 1

The parameter parentheses cannot be omitted. Such as:

const manyParams = (param1, param2) = > {
	// Function body
};
Copy the code

Use the number of lines in the function body to classify whether curly braces can be omitted

  • When the function body has only one line, the curly braces can be omitted, andreturnKeywords also need to be omitted, which is called Implicit Return. Such as:
const singleLine = param= > param * 2 // For an input parameter, the parameter parentheses can be omitted
Copy the code
  • When a function body has more than one line, curly braces cannot be omitted. Such as:
const multiLine = param= > {
	const output = param * 2
	return output
};
Copy the code

On display returns and implicit returns

An implicit return is written to omit the return keyword, as seen in the example above. The opposite is Explicit Return, which is written with the Return keyword not omitted. In the example where the body of the function is a single line, it is also permissible to write the returned expression on multiple lines. That is:

const singleLine = param= > 
param * 2

singleLine(3) // Returns the value 6
Copy the code

If you use an implicit return in an arrow function, the return must be an expression, not a statement.

Function expressions return a value or can be replaced by a value, while function declarations perform some code.

Such as:

const implicit = param= > param ? 'HELLO' : 'WORLD'
implicit(1) // return 'HELLO'

// The following is an error
const implicitAlt = param= > if(param) {return 'HELLO'}
// Uncaught SyntaxError: expected expression, got keyword 'if'
Copy the code

The reason is that if belongs to a function declaration and the conditional (ternary) operator is an expression. In addition, there are some errors to recognize, such as:

const singleLine = param= > return param * 2 
/* ERROR: Uncaught SyntaxError: Expected expression, got keyword 'return' return

const returnObj = param= > {'some string'}
returnObj(1)
/* return undefined because when there are curly braces, it is no longer an implicit return, it must have a return keyword. Const returnObj = param => {return 'some string'} */
Copy the code

conclusion

  • When the number of input parameters is 1, the parameter brackets can be omitted. In other cases, the parameter brackets cannot be omitted.
  • When the function body is one line, you can use an implicit return to omit the curly braces. In this case, the right side of the arrow function must be a function expression, not a function declaration (returnKey words must be omitted).

reference

  1. Arrow function expressions: MDN Doc
  2. Require parens in arrow function arguments (arrow-parens): ESint Doc
  3. JavaScript Arrow Function Return Rules
  4. Arrow Functions Return Rules in JavaScript