Javascript - Arrow Function Expression

About

An arrow function expression has a shorter syntax than a function expression and does not bind its own:

• this,
• arguments,
• super,
• or new.target.

These function expressions are best suited for non-method functions.

As an arrow function does not:

• bind its own this, it doesn't create then its own this context, this has its original meaning from the enclosing context (even in non strict).
• bind an arguments object. Arguments are simply a reference to the same name in the enclosing scope.
• bind to new.target. It cannot be used as constructors and will throw an error when used with new.

Syntax

Javascript

(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => expression  // equivalent to { return expression; }

where:

• parentheses are optional with one parameter
• parentheses are mandatory without parameter and for several parameters
• Javascript - Statement
• Javascript - Expression
• defaultValue1…N are default parameter

The following syntax is also supported:

• Rest parameter
• destructuring assignment.

Typescript

const myFunction = (param1: Type1, param2: Type2): ReturnType => {
  // function body
}

Example

Circle Area

var area = (r) => Math.PI * r ** 2;
var rayon = 3;
console.log(`The area of a circle with the rayon ${rayon} is ${area(rayon)}`);

Destructuring Assignment

var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;

where:

• in [a, b] = [1, 2]:
  • a get the value 1
  • b get the value 2
• in {x: c} = {x: a + b}
  • c get the value a + b thus 3
• then a + b + c equal:

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

Documentation / Reference

• en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions