JavaScript Arrow Function

JavaScript arrow function expression has shorthand style anonymous function syntax and lexically bind this keyword. When arrow function enclose as soon as result will be return.

You can't pass arguments in an arrow function body.

Arrow function behaviors is like a built-in JavaScript function, because arrow function doesn't support construct method and prototype method.

JavaScript Arrow Function

The Following expression for JavaScript arrow function,

() => {}             // returns, function ()

Ultimately arrow function represent as anonymous function. so finally we can say type of arrow function and anonymous function both are same.

typeof( () => {} ) === "function"        // returns, true

Syntax

// arrow function
() => { statements }

// Required parentheses around parameters (more then one parameter) 
// Multiple arguments parentheses required
(param1, param2,...) => { statements }

// Not required parentheses around single parameter
param1 => { statements }

Example

// empty arrow function, return undefined
var empty = () => {};               // equivalent to: function empty()

// empty arrow anonymous function
() => main();                       // equivalent to: function ()

Addition of number

// Not required parentheses around lower-precedence expression
var addition = add => add + add;    // returns, undefined
addition(10);                       // returns, 20

Run it... »

Array mapping

[5,10,15].map(n => n * 2);            // returns, Array [ 10, 20, 30 ]

Run it... »

Find maximum value

var max = (x, y) => (x > y) ? x : y;   // returns, undefined
max(15, 24);                           // returns, 24

Run it... »

this keyword this keyword is a lexical return the window object.

var myfun = () => {'use strict'; return this};

// Assume window is global object
myfun() === window;         // returns, true

Find the length of string

var emp_name = [
  "Opal Kole",
  "Max Miller",
  "Beccaa Moss",
  "Paul Singh",
  "Ken Myer"
];
var static_ans = emp_name.map(function(n){ return n.length });

var arrow_ans = emp_name.map(n => n.length);

document.writeln("static answer: " + static_ans);
document.writeln("Arrow function answer: " + arrow_ans);

Run it... »