DEV Community

Cover image for Arrow Function Vs Normal Function
Tiago Danin
Tiago Danin

Posted on

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
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

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))
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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 }

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)