JS: Arrow Function

What is Arrow Function

Arrow function is a short syntax for 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

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

() => body

no parameter.

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

x => body

one parameter.

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

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

(x, y) => body

two parameters.

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

(a, b, ...c) => body

with rest param syntax (that is, any number of parameters). [see Function Rest Parameters]

// arrow function with rest parameter
const f = ((...x) => x);
console.log(JSON.stringify(f(3, 4, 5)) === "[3,4,5]");

(a, b = 2) => body

with default value. [see Function Argument Default Value]

// arrow function with default param value
const f = ((a, b = 4) => [a, b]);
console.log(JSON.stringify(f(3)) === "[3,4]");

([a, b] = [1, 2]) => body

set default values from array arg. [see Function Argument Destructure]

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

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

({c,b} = {a:1, b:2, c:3 }) => body

set default values from object arg. [see Function Argument Destructure]

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)

x => (object_literal_expression)

if returns a object by Object Literal Expression , need parenthesis.

// arrow function, return object by literal expression

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:

((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,
);

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 thisBinding

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.

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

// 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");

[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
);