ES6 Arrow Functions

by dshilkret

HTML

<div class="output">

</div>

CSS

.output {
	font-family: verdana;
	color: red;
}

Babel + JSX

// Arrow Functions

// --- Old Code --- \\
var foo = function(a, b) {
	var calc =  a + b;
	return calc;
};

// --- New Code --- \\
// We remove the function name and add an arrow =>
// If all the function is on one line the return is implicet and we can remove {}
// Important to remember that the arrow function auto binds the model outside to the function
var bar = (a, b) => a + b; // {} can only be remove on one liners
// If only one argument we can remove the brackets ()
var baz = a => a+3;
// This can even be used within mapping of an array
console.log([1,2,3].map(val=>val*2));

document.getElementsByClassName('output')[0].innerHTML = bar(1, 1);
alert(baz(2));