JavaScript Arrow Function

Arrow function is used a lot in React.js. Here we copy the syntax from mozilla MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions for quick reference only. If you are looking for actual example, go there to take a look.

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

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }

// The parameter list for a function with no parameters should be written with a pair of parentheses.
() => { statements }

// Parenthesize the body of a function to return an object literal expression:
params => ({foo: bar})

// Rest parameters and default parameters are supported
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { 
statements }

// Destructuring within the parameter list is also supported
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f(); // 6

Where Would You See It In React

  1. Use in function-based component.
  2. Call back function, such as onClick = () ⇒ {this.props.onClick()}