Arrow Function

The next syntax we will talk about is arrow function.

The traditional way of declaring a function are:

function myFunction() {
  // do something
}

var mySecondFunction = function () {
  // do something else
};

With arrow function:

var myFunction = () => {
  // do something
};

var mySecondFunction = () => {
  // do something else
};

Compact syntax

Other than the fact that => is shorter than writing the whole function keyword, there are a few usages of arrow function that make your code more compact.

1. No parentheses required for single parameter

   function double(x) {
     return x * 2;
   }
   
   var newDouble = (x) => {
     return x * 2;
   };
   

2. Implicit return for single expression

   function add(x, y) {
     return x + y;
   }
   
   var newAdd = (x, y) => x + y;
   

   There is one pitfall for this second behavior: if you return an object, you need to wrap it with parentheses because JavaScript engine couldn’t tell if the curly brace is the beginning of a function or the beginning of an object.

   function createObject(x, y) {
     return { x, y };
   }
   
   var newCreateObject = (x, y) => ({ x, y });
   

Those compact syntaxes would make your code much more shorter, especially in two common JavaScript use cases:

1. Currying (no worries if you not sure what is currying, we will discuss it in more details later)

   function add(x) {
     return function (y) {
       return x + y;
     };
   }
   
   var newAdd = (x) => (y) => x + y;
   

2. Inline function

   var numbers = [2, 3, 4];
   
   // `map` is a method on all Array object. We will discuss this later.
   
   numbers.map(function (num) {
     return num * 2;
   });
   
   numbers.map((num) => num * 2);
   

function pickPhone(person) {
  return {
    phoneNumber: person.phone,
  };
}

function multiply(x, y) {
  return x * y;
}

function multiplyCurry(x) {
  return function (y) {
    return x * y;
  };
}

function multiplyAll(...numbers) {
  return numbers.reduce(function (result, num) {
    return result * num;
  }, 1);
}

function doubleAndMultiplyAll(factor) {
  return function (...numbers) {
    return numbers
      .map(function (num) {
        return num * factor;
      })
      .reduce(function (result, num) {
        return result * num;
      }, 1);
  };
}