JavaScript Arrow Functions Expressions

(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

console.log('Welcome to Arrow Functions!');

// no parameters

// no parameter, regular function
function hello1() {
    return 'Hello!';
}
console.log('no parameters, regular function ' + hello1());

// no parameter, arrow function
const hello2 = () => {
    return 'Hello!';
}
console.log('no parameters, arrow function ' + hello2());

// no parameter, arrow function single line 
const hello3 = () => 'Hello!';
console.log('no parameters, arrow function single line  ' + hello3());

// one parameter

// one parameter, regular function
function hello4(x){
    return 'one parameter, regular function ' + 'Hello, ' + x;
}
console.log(hello4('milburn'));

// one parameter, arrow function
const hello5 = x => {
   return  'one parameter, arrow function ' + 'Hello, ' + x;
}
console.log(hello5('milburn'));

// one parameter, arrow function single line 
const hello6 = x => 'Hello, ' + x;
console.log('one parameter, arrow function single line ' + hello6('milburn'));

//two parameters

// two parameters, regular function
function hello7(x,y){
    return 'Hello, ' + x + ' ' + y; 
}
console.log('two parameters, regular function ' + hello7('milburn', 'gomes'));

// two parameters, arrow function
const hello8 = (x,y) =>{
    return 'two parameters, arrow function ' + 'Hello, ' + x + ' ' + y;
}
console.log(hello8('milburn', 'gomes'));

// two parameters, arrow function single line 
const hello9 = (x,y) =>  "Hello, " + x + " " + y;
console.log('two parameters, arrow function single line ' + hello9('milburn', 'gomes'));

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

// This statement returns the array: [8, 6, 7, 9]
elements.map(function(element) {
  return element.length;
});

// The regular function above can be written as the arrow function below
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

// When there is only one parameter, we can remove the surrounding parentheses
elements.map(element => {
  return element.length;
}); // [8, 6, 7, 9]

// When the only statement in an arrow function is `return`, we can remove `return` and remove
// the surrounding curly brackets
elements.map(element => element.length); // [8, 6, 7, 9]

// In this case, because we only need the length property, we can use destructuring parameter:
// Notice that the `length` corresponds to the property we want to get whereas the
// obviously non-special `lengthFooBArX` is just the name of a variable which can be changed
// to any valid variable name you want
elements.map(({ length: lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

// This destructuring parameter assignment can also be written as seen below. However, note that in
// this example we are not assigning `length` value to the made up property. Instead, the literal name
// itself of the variable `length` is used as the property we want to retrieve from the object.
elements.map(({ length }) => length); // [8, 6, 7, 9] 

var func = x => x * x;                  
// concise body syntax, implied "return"

var func = (x, y) => { return x + y; }; 
// with block body, explicit "return" needed

var func = () => { foo: 1 };
// Calling func() returns undefined!

var func = () => { foo: function() {} };
// SyntaxError: function statement requires a name

This is because the code inside braces ({}) is parsed as a sequence of statements (i.e. foo is treated like a label, not a key in an object literal).

You must wrap the object literal in parentheses:

var func = () => ({ foo: 1 });

var func = (a, b, c)
  => 1;
// SyntaxError: expected expression, got '=>'

var func = (a, b, c) =>
  1;

var func = (a, b, c) => (
  1
);

var func = (a, b, c) => {
  return 1
};

var func = (
  a,
  b,
  c
) => 1;

// no SyntaxError thrown

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok

// An empty arrow function returns undefined
let empty = () => {};

(() => 'foobar')(); 
// Returns "foobar"
// (this is an Immediately Invoked Function Expression)

var simple = a => a > 15 ? 15 : a; 
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a : b;

// Easy array filtering, mapping, ...

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) => a + b);
// 66

var even = arr.filter(v => v % 2 == 0); 
// [6, 0, 18]

var double = arr.map(v => v * 2);
// [10, 12, 26, 0, 2, 36, 46]

// More concise promise chains
promise.then(a => {
  // ...
}).then(b => {
  // ...
});

// Parameterless arrow functions that are visually easier to parse
setTimeout( () => {
  console.log('I happen sooner');
  setTimeout( () => {
    // deeper code
    console.log('I happen later');
  }, 1);
}, 1);