What are the arrow functions, or arrow functions, available in Javascript from the ES6 update of the language.
ES6 “arrow functions” are a new way of expressing the usual functions, in a summarized way and with some new features that we will explain in this .
Although they are commonly known as arrow functions, you can also hear about them with their name in Spanish, funciones flecha, or as “fat arrow functions”, since a double line is used to form the arrow, with the mathematical equal sign “=” .
In addition to serving as syntactic sugar, they are also one of the most representative novelties of ES6, and which solves one of the most representative and classic Javascript problems in its ES5 version, the new context generated by normal functions.
How to express a function with arrow functions
This part is very simple, instead of using the function keyword, the fat arrow symbol is used, as can be seen in the following code:
let myfunction = () => { //function code }
As you have seen, not only is the arrow used, but the parentheses where the function parameters would be placed are also moved to the side, placing them before the arrow.
The invocation of the function would be done as you already know.
myfunction();
Arrow function parameters
The treatment of the parameters is carried out as before, they are simply placed between the parentheses. Let’s look at this second example.
let greeting = (name, title) => { alert(‘Hello ‘ + title + ‘ ‘ + name) } //call greeting(‘Miguel’, ‘mr.’);
The only detail is that, in the case that we have a single parameter, we can save ourselves from placing those parentheses.
let square = number => { return number * number; }
Absence of function keys
There is another special case, in which we can also save some extra character, in this case the opening and closing braces of the function. It would be when we only have one line of code in our function.
You could see the greeting function like this too:
let greeting = (name, title) => alert(‘Hello ‘ + title + ‘ ‘ + name);
Absence of the word return
If we have a single line of code and the function returns a value, we could also save the return word, in addition to the curly braces as mentioned before.
The function of the square of a number could be expressed like this.
let square = number => number * number;
more compact code
As you can see, by exploiting all the possibilities of the arrow functions, we can obtain a very compact code. To observe this fact you can compare it with declaring a function in a traditional way in ES5:
var square = function(number) { return number * number; }
Perhaps in the declaration of a function like this alone in the code you won’t get to see that much advantage, but since Javascript is a language full of callback functions, you can save a lot of lines of code.
Look at this asynchronous code using serTimeout():
setTimeout(function() { alert(‘show me after 1 second’) }, 1000);
You could see it this way using arrow functions.
setTimeout( () => alert(‘I show myself after 1 second’), 1000);
But we can still further capture the benefits of this ES6 syntax in structures like promises. As we already saw in , generally two callbacks have to be defined, one for the positive case and the other for the negative. Expressed those functions with arrow functions it would look like this:
promiseReturnFunction() .then( value => alert(value) ) .catch( error => alert(error) );
Avoid generating a new context in this
When you use callback functions they generate a new context over the “this” variable. It is an effect that if you have experience with Javascript you will know very well. In these cases, in order to access the previous this, things like “var that = this” were done, or perhaps you used “.bind(this)” to bind the context.
In case it’s not clear, look at the following code:
var objTest = { delay: function() { setTimeout(function() { this.doSomething(); }, 1000); }, doSomething: function() { alert(‘I did something’); } } objTest.delay();
In the setTimeout() function we are sending a callback that generates a new context, so you cannot access this inside that function. Or rather, you can access it, but it won’t return what you might expect, which would be the objTest object itself. That is why when executing that code you would get an error:
Uncaught TypeError: this.doSomething is not a function
It’s just that this is no longer the object itself and therefore the method you’re looking for doesn’t exist.
The solution in ES5 would be to bind this or cache the reference to this in a local variable that does exist in the scope of the callback function. It doesn’t really matter much that we see the code to solve this in ES5, since in ES6 and with the arrow functions we could solve it in a much more elegant way.
var objTest = { delay: function() { setTimeout( () => { this.doSomething(); }, 1000); }, doSomething: function() { alert(‘I did something’); } } objTest.delay();
Now the function sent as a callback to setTimeout() is defined with an arrow function and therefore does not generate a new context in the this variable. That is why trying to call this.doSomething() will not generate any errors and that doSomething() method will be executed perfectly.
Facebook Comments
Disqus