JS: Arrow Function

By Xah Lee. Date: . Last updated: .

New in ES2015.

(x => x + 1)

is similar to

function (x) { return x + 1; }

but no this binding, and no arguments object.

Arrow function cannot be used with new.

Arrow function is intended to be used as pure function, great for functional programing.

Arrow function can replace any function, as long as the function does not use this, arguments, or with new, and is not intended to be part of a class/prototype hierarchy.

〔►see JS: “this” Binding

〔►see JS: Function's “arguments” Object

〔►see JS: Operator “new”

Arrow Function Syntax

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

Left-Hand-Side Forms

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

Right-Hand-Side Forms

  1. x => expr → expression on right hand side. When expression is complex, good idea to add a parenthesis, e.g. x => (expr)
  2. x => { … } → block of statements on right hand side.
  3. 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 JS: 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 JS: 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 JS: Destructuring Assignment

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

ECMAScript 2015 §ECMAScript Language: Functions and Classes#sec-arrow-function-definitions

“this” Not Bound

Arrow function does not bind the this keyword. Its value is whatever it is in the outer context.

〔►see JS: “this” Binding

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

“arguments” Not Bound

Arrow function does not bind the arguments keyword. Its value is whatever it is in the outer context.

〔►see JS: Function's “arguments” Object

// 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

Reference

ECMAScript® 2016 Language Specification#sec-arrow-function-definitions

Function Topic

  1. JS: Define Function
  2. JS: Function Parameters
  3. JS: var/function Order
  4. JS: var Name Scope
  5. JS: Function Declaration vs Function Expression
  6. JS: Closure
  7. JS: Functional Programing
  8. JS: Function Call, Apply, Bind
  9. JS: Function Argument Default Value
  10. JS: Function Rest Parameters
  11. JS: Arrow Function

  1. JS: Function Object
  2. JS: Function.prototype
Like what you read? Buy JavaScript in Depth