Arrow Function

The next syntax we will talk about is arrow function.

The traditional way of declaring a function are:

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

With arrow function:

js
var myFunction = () => {
// do something
};
var mySecondFunction = () => {
// do something else
};
js
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

    js
    function double(x) {
    return x * 2;
    }
    var newDouble = (x) => {
    return x * 2;
    };
    js
    function double(x) {
    return x * 2;
    }
    var newDouble = (x) => {
    return x * 2;
    };
  2. Implicit return for single expression

    js
    function add(x, y) {
    return x + y;
    }
    var newAdd = (x, y) => x + y;
    js
    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.

    js
    function createObject(x, y) {
    return { x, y };
    }
    var newCreateObject = (x, y) => ({ x, y });
    js
    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)

    js
    function add(x) {
    return function (y) {
    return x + y;
    };
    }
    var newAdd = (x) => (y) => x + y;
    js
    function add(x) {
    return function (y) {
    return x + y;
    };
    }
    var newAdd = (x) => (y) => x + y;
  2. Inline function

    js
    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);
    js
    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);

Exercise

Rewrite the following functions with arrow function to make them more compact

js
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);
};
}
js
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);
};
}