🏹E tem diferença entre Arrow function e function?

Quando comecei a estudar ReactJS uma das questões que mais me encantou na linguagem foi a estrutura bem mais clara para entendimento de funções. Eu tinha acabado de passar por um turbulento e desafiador período de transição da programação estruturada para a programação orientada a objetos e estava um pouco desiludida com a programação, pois tudo parecia ser um conjunto de hieróglifos indecifráveis.

Nos primeiros cursos de ReactJS comecei ~~finalmente~~ a entender os conceitos de classes e objetos e mal sabia eu que estava sendo apresentada a Programação funcional. (fui ligar o nome ao paradigma anos mais tarde ...)

Com a chegada do ES6 todos os cursos que estava fazendo de ReactJS passaram a usar Arrow Function. Para mim foi amor instantâneo!! A estrutura se mostrou tão simples que pela primeira vez adotei em meus projetos sem procurar o conceito por trás.

💡 Uma nota sobre a forma como aprendo ... sou o tipo de pessoa que para internalizar um novo conceito precisa entender a origem, como funciona, porque uso, como uso e o que é esperado. Isso é algo que as vezes torna minha curva de aprendizagem um pouco mais longa pois não consigo apenas "usar" um determinado elemento se não souber o que ele realmente faz. E toda vez que apenas uso algo sem saber exatamente porque estou usando, tu pode ter certeza que vou esquecer rapidão como aplicar ...

Bom, voltando a Arrow Function ... Apesar de ser uma estrutura que utilizo de forma bem recorrente, em alguns momentos o uso de uma function tradicional me parecia fazer mais sentido no código ... mas, não sabia muito porque a escolha por uma ou outra forma... E então chegou o momento de ~~tentar~~ entender as diferenças ...

Arrow function é uma sugar syntax de function que foi incluido no es6. Mas vamos as diferenças ...

Lexical scope this

Quando comecei a estudar orientação a objeto o this com certeza era meu maior pesadelo. Assim, o fato do Arrow Function capturar o valor do this do escopo em que se encontra facilitou demais meu aprendizado.

Antes da arrow function, toda função definia seu próprio valor de this considerando a forma como era chamada, no Es3/5 buscou-se corrigir este comportamento com a atribuição do valor de this à uma variável encapsulada .

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| corretamente se refere ao objeto Person
  }, 1000);
}

var p = new Person();

Arrow Function não é hoisted

De forma bem simplificada, o conceito de hoisted significa poder utilizar uma função antes mesmo dela ser declarada.

tradicional(); // 'Tradicional function'
function tradicional() {
  console.log('Tradicional function');
}

No caso de funções anônimas não temos o benefício do hoisted. Logo, como a Arrow function é sempre uma função anônima (atribuída a uma variável), não temos como chamar uma arrow function antes de sua declaração.

anonymous(); // Exception: TypeError: anonymous is not a function
var anonymous = function() {
  console.log('Anonymous function');
};

arrow(); // Exception: TypeError: arrow is not a function
var arrow = ()=> nsole.log('Arrow function');

Constructor e Arguments

Vamos juntar estes dois itens pois a diferença/motivo em relação a função tradicional é a mesma.

Arrow Functions não pode ser usadas como contrutor e não tem acesso aos argumentos exatamente pela primeira diferença que listei ... lexical scope this.

// Traditional function
var crescente = function() {
  return Array.from(arguments).sort((a, b) => a > b)
}
crescente(3,2,5,1,4,8,7,6); // Array [ 1, 2, 3, 4, 5, 6, 7, 8 ]


// Arrow function
var crescente = () => {
  return Array.from(arguments).sort((a, b) => a > b);
}
crescente(3,2,5,1,4,8,7,6); // Exception: ReferenceError: arguments is not defined

No caso dos argumentos podemos "contornar" usando o spread operator

var crescente = (...arguments) => {}

💡 Não posso deixar de registrar que demorei a internalizar esse spread operator ... eita conceito que não entrava na mente ... 🙄

Bom ... pesquisei bastante sobre o tema, esbarrei em uma série de novos conceitos, mas juntando tudo e analisando prós e contras, não vislumbrei nenhuma diferença que impedisse o uso da arrow function em praticamente todos os cenários de projeto.

Pode ser que daqui a algum tempo eu mude de opinião ou encontre alguma diferença que realmente me impeça de usar o arrow function, mas a verdade que pra mim a Arrow function foi um marco de aprendizado da programação funcional (~~e morte ao this~~ 🤣).

https://medium.com/frontend-quest/arrow-functions-vs-functions-9048ec12b5c6 https://pt.stackoverflow.com/questions/143399/qual-a-diferença-entre-function-e-por-que-não-funciona-o-http-ge