Arrow functions and examples
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
See the Pen Chained arrow function example by Matt Summers-Sparks (@msummers40) on CodePen.