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};
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};
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.
-
No parentheses required for single parameter
jsfunction double(x) {return x * 2;}var newDouble = (x) => {return x * 2;};jsfunction double(x) {return x * 2;}var newDouble = (x) => {return x * 2;};jsfunction double(x) {return x * 2;}var newDouble = (x) => {return x * 2;};jsfunction double(x) {return x * 2;}var newDouble = (x) => {return x * 2;}; -
Implicit return for single expression
jsfunction add(x, y) {return x + y;}var newAdd = (x, y) => x + y;jsfunction add(x, y) {return x + y;}var newAdd = (x, y) => x + y;jsfunction add(x, y) {return x + y;}var newAdd = (x, y) => x + y;jsfunction 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.
jsfunction createObject(x, y) {return { x, y };}var newCreateObject = (x, y) => ({ x, y });jsfunction createObject(x, y) {return { x, y };}var newCreateObject = (x, y) => ({ x, y });jsfunction createObject(x, y) {return { x, y };}var newCreateObject = (x, y) => ({ x, y });jsfunction 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:
-
Currying (no worries if you not sure what is currying, we will discuss it in more details later)
jsfunction add(x) {return function (y) {return x + y;};}var newAdd = (x) => (y) => x + y;jsfunction add(x) {return function (y) {return x + y;};}var newAdd = (x) => (y) => x + y;jsfunction add(x) {return function (y) {return x + y;};}var newAdd = (x) => (y) => x + y;jsfunction add(x) {return function (y) {return x + y;};}var newAdd = (x) => (y) => x + y; -
Inline function
jsvar 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);jsvar 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);jsvar 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);jsvar 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);};}
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);};}