I've been trying to learn some of the new features of ES6, and while most of it makes sense, I'm having trouble grasping the arrow function. I'm not asking so much why it exists as I am how to read it.Previously in JS, when a function was defined, the syntax reads really nicely.var foo = function(property) { return property + 'bar' } says: define a variable 'foo' that is a function that returns property + 'bar'.Alternatively, function foo(property) {} roughly reads as: define a function named foo that has a property.But when I see something with an arrow function:const foo = (property) => { return property + 'bar' }How do I read that? Define a constant 'foo' that equals...a property...that equals...returning a property plus 'bar'?Then, probably because I don't fully understand this concept, I get to a line like this and get pretty lost:const actionLogger = ({dispatch, getState}) => (next) => (action) => {   console.log(action); return next (action) }In a Redux instructional video, the author switches to arrow functions because it 'has clearer semantics in ES6', so I just want to understand the semantics of arrow functions!
How to 'read' arrow functions in ES6?
javascript;functions;syntax;es6
const foo = (property) => { return property + 'bar' }In JavaScript, functions are objects. That means they can be passed around and assigned to variables (I mean, other languages support it too and are adapting it more and more, but JavaScript is pretty much build on that).In order to understand ES6 fat arrow functions, it's good to know what the function expands to as well as the few new rules that come with ES6 anonymous functions, such as:lexical thisimplicit returnnot having to use brackets for a single parameter functionsWith that knowledge in mind the mentioned piece of code may look like any of the following variants:const foo = property => { return property + 'bar' }const foo = (property) => property + 'bar'const foo = property => property + 'bar'And it all expands to:var foo = function(property) {    return property + 'bar'}If you are familiar with pointers in languages like C or C++, what the fat arrow syntax does is it creates a function and returns a function pointer to it which may be assigned to a variable on the left side of the equation.That is the main thing you got wrong, you are not returning some magical property which is assigned to the constant foo variable, the property is a function, and that's it.So while the initial Redux code might look a little off-putting at first it really expands to nothing else than a few chained functions within each other.var actionLogger = function actionLogger(input) {  var dispatch = input.dispatch;  var getState = input.getState;  return function (next) {    return function (action) {      console.log(action);      return next(action);    };  };};The actions logger is then called like this:// You pass a dispatch and getState variables to itvar dispatchedLogger = actionLogger({dispatch: someDispatch, getState: someState});// You define a function that is supposed to fire after each action// Each action type will be modified by apending 'bar' to itvar withFollowUpAction = dispatchedLogger(action => action + 'bar');// Finally you run it with the desired actionwithFollowUpAction('someAction');Now I haven't really worked with Redux, but I believe the reason why the functions are chained the way they are is because of the API of the Redux library, which knows how to consume it.