A Arrow function é um recurso que foi introduzido no ES6. É uma maneira mais concisa de escrever expressões de função e funciona de maneira semelhante às funções regulares, mas com certas diferenças.
let somar = function(n1, n2){
return n1 + n2;
}
// Utilizando arrow functions =>
let somar = (n1, n2) => { return n1 + n2 };
O arrow function permite ao desenvolvedor alcançar o mesmo resultado simplificando o seu código. Os colchetes se tornam desnecessários se apenas uma expressão seja realizada:
let somar = (n1, n2) => n1 + n2;
Se houver apenas um argumento na função, os parênteses tornam-se desnecessários:
let multiplicaQuadrado = x =:> x * x;
E, caso não existam argumentos:
let dizerOla = _ => console.log("Olá");
As arrow functions têm acesso ao objeto de argumentos da função pai regular mais próxima. Os parâmetros nomeados e restantes são muito utilizados para capturar argumentos passados para arrow functions:
// Em uma função regular
let minhaFuncao = {
mostrarArgumentos(){
console.log(argumentos);
}
};
minhaFuncao.mostrarArgumentos(1, 2, 3, 4);
// Utilizando arrow functions:
let minhaFuncao = {
mostrarArgumentos: () => {
console.log(...argumentos);
}
};
minhaFuncao.mostrarArgumentos(1, 2, 3, 4);
// Argumento is not defined
As funções de seta não tem as suas próprias THIS, sendo o contrário de uma expressão regular. O valor de this dentro de um arrow está sempre ligado ao valor de this na função pai regular que seja mais próxima.
let pessoa = {
nome: "Fulano Ciclano",
thisArrow: () => {
console.log("O nome é: " + this.nome); // Não há binding para this aqui
},
thisRegular(){
console.log("O nome é: " + this.nome); // O bind vai funcionar aqui
}
};
pessoa.thisArrow();
pessoa.thisRegular();
/* Saída */
//Meu nome é
//Meu nome é Fulano Ciclano
As funções regulares criadas utilizando declarações ou expressões de função são construtivas. Como elas são funções construtoras, elas podem ser invocadas utilizando a palavra-chave new.
As arrow functions não são construtivas, então, não podem ser chamadas utilizando a palavra-chave new:
let soma = (n1, n2) => console.log(n1 + n2); new soma(2, 3); /* Saída */ // soma is not a constructor
As funções de seta também não podem ter parâmetros nomeados duplicados, seja no modo estrito ou não. Isso significa que:
// Isso aqui é válido
function somar(x, x){
//...Seu código aqui
}
Mas ao utilizar o modo estrito, não é válido:
'use strict'
function somar(x, x) {}
// SyntaxError: duplicate formal argument x
Com as arrow functions, os argumentos duplicados serão sempre inválidos, independente de estar ou não em modo estrito:
(x, x) => {}
// SyntaxError: duplicate argument names not allowed in this context
Referência: https://medium.com/better-programming/difference-between-regular-functions-and-arrow-functions-f65639aba256
Gostou deste artigo? Comente abaixo e mostre para seus amigos!
