A diferença entre funções regulares e arrow functions:

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!