JavaScript: Arrow Function

By Xah Lee. Date: . Last updated: .

Arrow Function is new in ES2015.

(x => x + 1)

is similar to

function (x) { return x + 1; }

but no this binding, and no argument object.

〔➤see JavaScript: Keyword “this”

〔➤see JavaScript: Function Optional Parameters

Arrow Function Syntax

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

Here's the 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, unspecified number of parameters). 〔➤see JavaScript: Function Rest Parameters
  5. (a, b = 2) => … → with default value. 〔➤see JavaScript: Function Argument Default Value
  6. ([a, b] = [1, 2]) => a + b → set default values from array arg. 〔➤see JavaScript: Destructuring Assignment
  7. ({c,b} = {a:1, b:2, c:3 }) => c + b → set default values from object arg. 〔➤see JavaScript: Destructuring Assignment

Here's the 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)

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
let f = x => x + 1;

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

Arrow function with rest parameter:

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

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

〔➤see JavaScript: Function Rest Parameters

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

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

〔➤see JavaScript: Function Argument Default Value

With destructuring assignment defaults:

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

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

〔➤see JavaScript: Destructuring Assignment

Expression Body and Block Body

Arrow function, with a expression body.

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

Arrow function, with a expression body that is a literal expression of object, require parenthesis around body.

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

Arrow function, with statement block body:

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

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

「this」 Not Defined

If you use this inside arrow function, its value is whatever it is in the outer context.

// "use strict"

// arrow function does not do anything to 「this」 binding
const f = (() => this);

console.log(f())

// here, the arrow function did nothing to 「this」
// value of f() is the same as

console.log(this)

// when 「this」 is used in a global context, its value is the object 「undefined」 if "use strict" is in effect, else 「window」

〔➤see JavaScript: Keyword “this”

「argument」 Not Defined

Arrow functions do not have the argument object.

// arrow function does not have the argument object
console.log(
    (() => { return argument; })()
)
// ReferenceError: argument is not defined


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

Function Topic

  1. JavaScript: Define Function
  2. JavaScript: Function Optional Parameters
  3. JavaScript: Variable/Function Declaration Order, Name Hoisting
  4. JavaScript Variable Scope: Function Level vs Block Level
  5. JavaScript: Function Declaration vs Function Expression
  6. JavaScript: Closure
  7. JavaScript: Functional Programing
  8. JavaScript: Function Call, Apply, Bind
  9. JavaScript: Function Argument Default Value
  10. JavaScript: Function Rest Parameters
  11. JavaScript: Arrow Function

  1. JavaScript: Function Object
  2. JavaScript: Function.prototype
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.