JavaScript: Arrow Function

By Xah Lee. Date: . Last updated: .

New in JS2015.

What is Arrow Function

Arrow function is a short syntax to define a pure function. Example:

(x => x + 1)

is similar to

function (x) { return x + 1; }

arrow function do not have complexities of this Binding, and no arguments Object , and not associated with Operator “new” .

Arrow function is designed as a pure function, great for functional programing.

Arrow Function Syntax

The left-hand-side and right-hand-side both can take several different forms.

Left-Hand-Side Forms

() => 3
no parameter.
x => 3
single parameter.
(x, y) => x + y
2 parameters.
(a, b, ...c) =>
with rest param syntax (that is, any number of parameters). [see Function Rest Parameters]
(a, b = 2) =>
with default value. [see Function Argument Default Value]
([a, b] = [1, 2]) => a + b
set default values from array arg. [see Function Argument Destructure]
({c,b} = {a:1, b:2, c:3 }) => c + b
set default values from object arg. [see Function Argument Destructure]

Right-Hand-Side Forms

x => expr
expression on right hand side. When expression is complex, good idea to add a parenthesis, example: x => (expr)
x => {}
block of statements on right hand side.
x => ({"p":x})
if returns a object by literal expression, need parenthesis.

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

(x => x + 1)(3)

Basic Examples

// arrow function syntax

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

console.log(
 [3,4,5].map(x => x + 1)
); // [4,5,6]
// arrow function, 2 parameters

console.log(
 ((a,b) => a + b)(3,4)
); // 7
// arrow function syntax, no parameter
console.log(
 (() => 3)()
); // 3

Assign to a Variable

// assign arrow function to a variable
const f = x => x + 1;

console.log(
 f(4)
); // 5

With Rest Parameter

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

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

[see Function Rest Parameters]

Default Param Value

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

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

[see Function Argument Default Value]

Destructuring Assignment

// with destructuring assignment defaults
const f = (([a, b] = [1, 2]) => a + b );

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

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

[see Function Argument Destructure]

Expression Body

// arrow function, with a expression body
console.log(
 (x => x + 1)(3)
); // 4

Return Literal Expression of Object

// arrow function, returning object by literal expression
console.log(
 ((x, y) => ({cat: x, dog: y}))(3, 4)
); // {cat: 3, dog: 4}

Block Body

// function arrow syntax, with a block body
console.log(
 (x => {
        const y = 4;
        return x+y;
    })(3)
); // 7

Arrow Function Recursion

Arrow Function can call itself if assigned to a variable.

const f = (x => ( ( x < 100 ) ? ( f(x+1) ) : ( x ) ) );

console.log( f(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

“arguments” Not Bound

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

// in browser

// arrow function does not have the arguments object
console.log(
    (() => { return typeof arguments; })()
); // undefined

// normal function does
console.log(
(function () { return typeof arguments; })()
); // object

// test with undefined variable
console.log(
 (() => { return x; })())
// ReferenceError: x is not defined

Type is Function

const ff = (x => x+1);
console.log( (typeof ff) === "function" ); // true

[see Value Types]

No Property Key “"prototype"”

Arrow function does not have property key "prototype".

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

console.log( Reflect.ownKeys ( ff ) )
// [ 'length', 'name' ]

[see Property Key "prototype"]

Parent is Function.prototype

Parent of arrow function is Function.prototype.

console.log(
Reflect.getPrototypeOf ( (x => x+1) ) === Function.prototype
); // true

JavaScript Function

BUY
ΣJS
JavaScript in Depth

JavaScript in Depth

Basic Syntax

Value Types

Variable

String

Property

Object and Inheritance

Array

Function

Constructor/Class

Iterable 🌟

Misc