Arrow functions

Arrow functions are pretty cool — they help you make code shorter and give less room for errors to hide. Because of this, they’ve become really popular with experienced developers.

The basic syntax

An arrow function is denoted by the fat arrow (=>).

Here’s what it looks like:

const arrowFunction = (arg1, arg2) => {
  // Do something
}

Arrow functions can look intimidating. But they’re simply just anonymous functions.

They become simple to understand once you place them side by side with a function expression.

// Arrow Function
const arrowFunction = (arg1, arg2) => {
  // Do something
}

// Function expression
const normalFunction = function (arg1, arg2) {
  // Do something
}

There are two basic differences when converting a function expression to an arrow function

• You remove the function keyword from a function expression
• You add a => after () and before {}

Advanced Arrow Function Syntax

The syntax of an arrow function can change depending on two factors:

1. The number of parameters required
2. Whether you’d like an implicit return

The number of parameters

If the arrow function has zero parameters, you can replace the parenthesis with an underscore (_).

const zeroArgs = () => {
  // Do something
}
const zeroArgsWithUnderscore = _ => {
  // Do something
}

If the arrow functions has only one argument, you can remove the parenthesis.

const oneArg = arg1 => {
  // Do something
}
const oneArgWithParenthesis = (arg1) => {
  // Do something
}

If the arrow function has two or more arguments, you need to use teh full arrow function syntax.

const twoOrMoreArgs = (arg1, arg2) => {
  /* do something */
}

This flexibility in deciding whether to omit parenthesis and replacing parenthesis with underscores allows you to declare a function with less code compared to typing function functionName () {}.

Implicit returns

Arrow functions automatically create a return statement if two conditions are present:

1. You write only one line of code in the function
2. That line of code is not enclosed in curly braces ({})

This implicit return feature lets you reduce three lines of code into a single line.

// 3 lines of code with a normal function
const sumNormal = function (num1, num2) {
  return num1 + num2
}

// Can be replaced with one line of code with an arrow function
const sumArrow = (num1, num2) => num1 + num2

If you need to use curly braces to return an object (more on this later), you can wrap the object with parethesis to trigger implicit returns.

const obj = value => ({ key: value })

Arrow Function vs Normal Functions

Arrow functions have became really popular. There was a period where everyone was crazy about arrow functions, but the craze has died down since.

So here’s a quick guide on how to use Arrow Functions vs Normal Functions

• When you declare functions: Use normal functions
• When you need anonymous functions: Use arrow functions

Don’t worry about anonymous functions for now — you’ll learn to use it as you go through the course. Just a quick hint if you’re curious: One great use of anonymous fuctions is through callbacks in event listeners.

With that let’s end this lesson.

Exercise

Arrow functions are important. Make sure you’re familiar with them.

For this lesson, do the following:

1. Make a function named ten that takes in zero arguments and return the value 10. Try using both () and _ syntax.
2. Make a function named logger that takes in one argument. It logs the argument you passed into it. Try it with and without parenthesis ().
3. Make a function called add that adds two numbers together. Try it with and without implicit returns.
4. Make a function called multiply that multiplies two numbers together. Try it with and without implicit returns.