JS: Arrow Function

By Xah Lee. Date: . Last updated: .

(new in ECMAScript 2015)

What is arrow function

Arrow function is new syntax for defining functions.

function fa(x) {
 return x + 1;
}

// can be written as

const fb = (x) => {
 return x + 1;
};

// or

const fc = (x) => x + 1;

Difference between arrow function vs function keyword

arrow function does not have the following complexities:

Arrow function syntax. left-hand-side forms

The left-hand-side has the form (args). If there is only one arg, the parenthesis is optional.

no parameter

// arrow function syntax, no parameter
console.log(
 (() => 3)(),
);
// 3

one parameter

// arrow function with one param
console.log(
 ((x) => x + 1)(2),
);
// 3

// typical use on array
console.log(
 [3, 4, 5].map((x) => x + 1),
);
// [ 4, 5, 6 ]

two parameters

// arrow function, 2 parameters
console.log(
 ((a, b) => a + b)(3, 4),
);
// 7

example. rest params

// arrow function with rest parameter
const f = (...x) => x;

console.log(
 f(3, 4, 5),
);

// [ 3, 4, 5 ]

example. with default value

// arrow function with default param value
const f = (a, b = 4) => [a, b];

console.log(
 f(3),
);
// [ 3, 4 ]

example. parameter pattern matching

// with binding pattern default
const f = ([a, b] = [1, 2]) => a + b;

console.log(
 f(),
);
// 3

console.log(
 f([4, 5]),
);
// 9

Arrow function syntax. right-hand-side forms

The right-hand-side can be a single expression or a block of code. But if the single expression is a Object Literal Expression, it needs parenthesis around it.

x => expr

expression on right hand side. When expression is complex, good idea to add a parenthesis, e.g. x => (expr)

🛑 warning: when the expression is a object literal expression, you need to add a parenthesis.

// example. arrow function, body is a single expression

console.log(
 ((x, y) => x + y)(3, 4),
);
// 7
// arrow function, return a object literal expression, need parenthesis
console.log(
 ((x, y) => ({ cat: x, dog: y }))(3, 4),
);
// { cat: 3, dog: 4 }
x => {statements}
block of statements on right hand side. 
// function arrow syntax, with a block body
console.log(
 ((x) => {
  const y = 4;
  return x + y;
 })(3),
);
// 7

Apply arrow function

To call arrow function immediately, wrap the whole with parenthesis:

console.log(
 ((x) => x + 1)(3),
);
// 4

Assign arrow function to a variable

// assign arrow function to a variable
const f = (x) => x + 1;
console.log(
 f(4)
);
// 5

Recursion

Arrow Function can call itself if assigned to a variable.

const ff = (x) => {
 if (x < 100) return ff(x + 1);
 else return x;
};

console.log(
 ff(3),
);
// 100

No this-binding

Arrow function does not have this (binding) . The this value is whatever it is in the outer context.

// the this binding for arrow function is undefined
const f = () => this;
console.log(
 f(),
);
// undefined

No “arguments” object

Arrow function does not have arguments Object . Its value is whatever it is in the outer context.

// arrow function does not have the arguments object
console.log(
 (() => {
  return arguments;
 })(),
);
// error: Uncaught (in promise) ReferenceError: arguments is not defined

No property key “"prototype"”

Arrow function does not have property key "prototype".

const ff = (x) => x + 1;
console.log(
 Reflect.ownKeys(ff),
);
// [ "length", "name" ]

Type of arrow function

const ff = (x) => x + 1;
console.assert(
 (typeof ff) === "function",
);

Parent is function.prototype

Parent of arrow function is Function.prototype.

console.assert(
 Reflect.getPrototypeOf((x) => x + 1) ===
  Function.prototype,
);