Arrow Function Vs Normal Function

O que é Arrow Function ?

Uma alternativa mais simples para criar funções, com algumas características diferente da função regular.

// Syntax
const soma = (a, b) => a + b
const mult = (a, b) => {
    return a * b
}

This (Contexto)

Seu contexto por padrão é o contexto global. Veja um exemplo de comparação:

const a = () => this === object
const b = function() {
    return this === object
}

const object = {
    a,
    b
}

console.log(object.a()) //false
console.log(object.b()) //true

No Chrome o contexto padrão é o window, logo:

const a = () => this === window
...
console.log(object.a()) //true

Arguments (Argumentos)

Não há Arguments, em alguns casos como no Node.Js ele pode recebe os argumentos globais.

const a = () => arguments //Uncaught ReferenceError: arguments is not defined
console.log(a(true))

Em uma regular função teríamos uma saída: { '0': true }

Constructor (Construtor)

Sem Constructor.

const a = () => true
console.log(new a()) //TypeError: a is not a constructor

Nome da Função

Em Arrow, o nome é o identificado que está recebendo a função. Numa regular podemos define o nome de uma função, como no exemplo abaixo, eu coloquei o nome sendo d.

const a = () => true
const b = function () { return true }
const c = function d () { return true}

console.log(a.name) //a
console.log(b.name) //b
console.log(c.name) //d

Retorno de Objeto

const casaA = () => {cozinha: true}
const casaB = () => ({cozinha: true})
const casaC = function () {
    return {cozinha: true}
}


console.log(casaA()) //undefined
console.log(casaB()) //{ cozinha: true }
console.log(casaC()) //{ cozinha: true }

Note: A casaA retorna undefined pois não há retorno na função. Não viu isso ? Vou rescrever casaA e casaB no modo normal:

const casaA = function () {
    {cozinha: true}
}
const casaB = function () {
    return {cozinha: true}
}

console.log(casaA()) //undefined
console.log(casaB()) //{ cozinha: true }

Sacou? Por isso usamos o parênteses no primeiro exemplo, casaB.

Veja mais em MDN: developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/Arrow_functions