JavaScript Arrow Functions: Syntax, Implicit Return and this

Arrow functions are a shorter way to write function expressions, introduced in ES2015. They are everywhere in modern JavaScript, especially as callbacks.

Syntax#

These three functions do the same thing:

function square1(n) {
  return n * n;
}

const square2 = function (n) {
  return n * n;
};

const square3 = (n) => n * n;

console.log(square1(4), square2(4), square3(4));

16 16 16

An arrow function is: parameters, then =>, then the body.

Implicit and explicit return#

If the body is a single expression, write it without braces and it is returned automatically (an implicit return). With braces, you need return:

const add = (a, b) => a + b;

const describe = (n) => {
  const kind = n % 2 === 0 ? "even" : "odd";
  return `${n} is ${kind}`;
};

const forgotReturn = (a, b) => {
  a + b;
};

console.log(add(2, 3));
console.log(describe(7));
console.log(forgotReturn(2, 3));

5
7 is odd
undefined

The last one is a common mistake: with braces, nothing is returned unless you write return.

Parentheses around parameters#

Parentheses around a single parameter are optional, but many style guides (and Prettier, by default) always include them.

Returning an object#

Braces after => start a function body, so to return an object literal directly, wrap it in parentheses:

const makeUser = (name, age) => ({ name, age });
const broken = (name) => { name: name };

console.log(makeUser("Asha", 30));
console.log(broken("Asha"));

{ name: 'Asha', age: 30 }
undefined

In broken, JavaScript read the braces as a function body containing a label, so it returned undefined.

Arrow functions as callbacks#

Arrow functions shine when passing small functions to other functions:

const prices = [120, 450, 80, 990];

const withTax = prices.map((p) => p * 1.18);
const expensive = prices.filter((p) => p > 100);
const sorted = [...prices].sort((a, b) => a - b);

console.log(withTax);
console.log(expensive);
console.log(sorted);

[ 141.6, 531, 94.39999999999999, 1168.2 ]
[ 120, 450, 990 ]
[ 80, 120, 450, 990 ]

(94.39999999999999 is the floating-point precision effect from Numbers and Math.)

How arrow functions differ#

The this difference matters most. An arrow function does not have its own this, so inside an object method it does not refer to the object:

const counter = {
  count: 0,
  increment() {
    this.count++;           // regular method: this is counter
    return this.count;
  },
  broken: () => {
    return typeof this;     // arrow: this comes from outside the object
  },
};

console.log(counter.increment());
console.log(counter.broken());

1
undefined

Rule of thumb: use regular method syntax for object and class methods, and arrow functions for callbacks, where inheriting this from the surrounding code is usually exactly what you want. this is covered fully in this, call, apply and bind.

Practice#

function isAdult(age) { return age >= 18; }
function fullName(first, last) { return first + " " + last; }
function toPoint(x, y) { return { x: x, y: y }; }

const isAdult = (age) => age >= 18;
const fullName = (first, last) => `${first} ${last}`;
const toPoint = (x, y) => ({ x, y });

console.log(isAdult(20), isAdult(15));
console.log(fullName("Ravi", "Kumar"));
console.log(toPoint(3, 4));

true false
Ravi Kumar
{ x: 3, y: 4 }

Key takeaway#