Javascript ES6 provide a new shorter/beautiful/useful/unforgettable/so sexy/and more… way to write functions : arrow functions. Yes, I love this feature, I think you will too.
Arrow function, what is it?
First, it’s a shorter syntax
And nothing is better than a great example, with two equivalent functions :
// Normal way const aLongFunction = function () { return 'uggly'; }; // Arrow function way const aShortFunction = () => 'beautiful';
WOW!
Explanation :
- The parenthesis contains parameters, so nothing changes here.
- Then, in the arrow function, when you have only one instruction, you can omit brackets and
return
keyword. In this case, the function will return automatically the result of your instruction.
It’s a function without its own this
Indeed, when you use the classic syntax, you can use this
inside. However, the arrow function has not its own this
.
So, let’s take a look at this example :
const func = function() { let instance = this; // instance correspond to this of the current function let arrowFunc = () => { console.log(instance === this); // it will show true } }
So, you can mix these two types of function to do what you want!
Let’s play with parameters
To continue, the syntax is really similar between arrow and classic function. So, if you want to write a sum function, you can write, for example :
// classic const sum = function(a, b) { return a + b; }; // Arrow const sum = (a, b) => a + b;
But you can use a shorter syntax if you have only one parameter. Let’s take a look at this increment function :
// Classic const increment = function(number) { return number + 1; } // arrow const increment = number => number + 1;
As you can see, I omitted parenthesis between the first number
. But if you want, you have the choice to let parenthesis.
And now, the arrow function return!
As I said at the start of the article, when you haven’t brackets, the first instruction after the arrow =>
will be returned. But if tou prefer, you can still use the same syntax as a classic function.
In other words, you can use these two syntaxes :
// short const NO_OP = () => undefined; // is equivalent to long : const NO_OP = () => { return undefined; };
Bonus : it’s great for the functional programming!
First, if you don’t know the functional programming, please, wait for few weeks. I will write some articles about it.
Write a curried arrow function
So, just imagine code a sum curried function without arrow function. The result can be :
const sum = function(a) { return function(b) { return a + b; } };
As you see, it’s really verbose. Then, look at a possible equivalent arrow function :
const sum = a => b => a + b;
Awesome, right? :O
Conclusion
In conclusion, you have to remind that :
- Arrow functions have a shorter syntax
- They have their own
this
In addition, I’ll just tell that you don’t have to replace classic functions. Because they are still needed in lots of cases when you need to use this
.
Thanks for ready, have a nice day, and see you for the next article! 🙂
Go to Modern Javascript Part 3 : Desctructuring and Spread operator
Previous parts :