ES6 + React.js

There are three main advantages to arrow functions:

They are more concise

They allow for implicit returns

They get their "this" value from the context, this means it keeps the context from where it is defined

An implicit return means you don’t have to write the return keyword:

const animalNames = animals.map(animal => animal.name);

In this example we are using the implicit return in the function passed to array.prototype.map.

You could also do this:

const animalNames = animalNames.map(animal => { return animal.name });

If you are writing an inner function or declaring a variable inside your function you’ll want to take this approach. This is why the implicit return is also known as a one-liner syntax as generally you’ll use it on one line to make the code more concise.

Probably the most important thing to know about arrow functions is that they get their binding from the context. This means their

this

...value is going to point to whoever is the caller. Look at this example to help understand this:

https://jsbin.com/caxuceg/edit?html,js,console

Also, look at this more in-depth article on arrow functions: JavaScript: The beauty of arrow functions.

Examples

This one is using the Javascript ternary conditional operator.

See the Pen arrow functions by Matt Summers-Sparks (@msummers40) on CodePen.

This one involves chaining together multiple methods