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!
Best Answer
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:
this
With that knowledge in mind the mentioned piece of code may look like any of the following variants:
And it all expands to:
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.
The actions logger is then called like this:
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.