jts272/ci-advanced-js-arrow-functions

CI | Advanced JavaScript > Arrow Functions > Using Arrow Functions | Template

Arrow Functions

To use this repository: - Click the "Use this template" button in the upper right - Choose a name for your repository and create it - In your own repository, click the green "Gitpod" button

Local fork created from this template for use in VS Code.

Quokka.js VS Code Extension used for real-time console output within the JS file.

node ${filename.js} used for actual terminal output.

---

ES6 arrow functions are usually defined as const:

• Can't be overwritten or misused
• Must be defined before being called

Steps to convert to conventional function to arrow function syntax:

1. rename 'function' to 'const'
2. put '=' between the name of the const and parentheses
3. use the 'fat arrow' '=>' to point at the curly braces

Steps to convert this arrow function to a single-line function:

1. remove the curly braces
2. remove the 'return' statement
3. put the expression on the same line after the '=>'

Think of the fat arrow as an 'implicit' return of what you want the function to return. Single line function only works for simple functions. Otherwise open the curly braces like usual.

Remember that as we are assigning these arrow functions to consts, each must be named differently. The 'function body' (as it were) of the arrow function can also be stylistically wrapped in parentheses.

Implicit return functions can optionally omit the parens when there is only one parameter.

If the function takes no params, empty parens '()' must still be used so JS knows you are declaring a function.

When returning multiple lines of code, the implicit return content should be wrapped in parens after the =>. The Prettier code formatter removes these parens, however.