This?
What is one of the most confusing parts of JS? this. No, not arrow functions, this. This changes based on the context of the call, not on the context of the definition. I am not going into much details on that for this, because this isn’t an article about this. It is an article about Arrow functions.
Why mention this? Because that is a big part of arrow functions. Before I get much into the syntax of them, I wanted to explain this part.
Inside of my someEventHandler what is this? The element you clicked on. What about this one?
Did you notice the difference? .bind(this) was used. Now the context becomes what ever you pass in to the bind function. That is really cool, and still used and needed.
Now, let’s see the last example on this.
Now, this is very much like the example above, this is the context of this when the function was created not called.
Syntax Please.
There are some tricky things to understand with arrow functions, and this is probably why you are here. So, without further ado, arrow functions:
That is pretty easy. That isn’t all use cases, and I’ll go into those more later. But Hopefully that helps to understand.
Difference #1: when can I take off the parenthesis around the props?
you can leave out the parenthesis when there is one property being passed in. All other time, keep ‘em.
Difference #2: when do I use curly braces or parenthesis around the function body?
You essentially have three types of function bodies. An explicit return, when you must explicitly call out the return statement; An implicit return, when the return statement is implied; and an expression—the stuff between two parenthasis— with an implicit return. The expression isn’t an arrow function specific thing, it can just be used there.
And that is pretty much it, until we talk about some uses of it like Currying.
Be sure to look at the whole series: ES6 Series
or the next section: ES6 Series: Async Javascript!
