DEV Community: Pedro Gustavo

What's the difference between arrow functions and regular functions?

Pedro Gustavo — Thu, 03 Aug 2023 03:43:45 +0000

Sometimes, after using a pattern so much, we end up forgetting the real reason why we write our code in that way. My intention in this content is to remind you (or show you for the first time) the main differences between a "regular" function and an arrow function.

Starting from the beginning... What is a function anyway?

What is a function?

I would call a function a "mini program". It's nothing more than a piece of code created for a specific purpose. The syntax is quite simple; for that, you need to use the function keyword.

Here's an example of a function that prints "Hello World!" to the console:


function helloWorld () {
    console.log('Hello World!')
}

Alright, now that we are all on the same page, let's get to the point!

What is an arrow function?

Starting from ES6, a new syntax possibility was introduced in JavaScript, called "arrow function." It allows us, among other things, to write reduced code, without the need to use the function keyword.

To achieve the same result as the previous code example using an arrow function, we would have the following code:

const helloWorld = () => console.log('Hello World!')

However, besides the difference in syntax, there are other differences that I want to present to you. These are the main ones you should be aware of to avoid unwanted issues.

Main differences

Context

Arrow functions have a dynamic this, meaning "their own this". On the other hand, regular functions inherit the context from where they were declared. Let me illustrate to clarify the explanation:


const testFunction = {
  number: 42,
  func: function() {
    return this.number
  }
}
console.log(testFunction.func())
// Output: 42

const testArrowFunction = {
  number: 42,
  func: () =>  {
    return this.number
  }
}
console.log(testArrowFunction.func())
// Output: undefined

In the case of the regular function, it absorbs the context of its declaration and, in this case, recognizes the property "number". Whereas the arrow function, as it "creates its own this", looks for the "number" property within itself and, since it doesn't find it, its return is undefined.

Constructor

Arrow functions cannot be constructors; it's not possible to make a call using the new operator:


const regular = function() {}
const arrowFunction = () => {}

new regular() // safe...
new arrowFunction() // Error: arrowFunction is not a constructor

Arguments

Due to lexical context, arrow functions do not have access to the arguments object. For example:


function regular() {
  return arguments
}
console.log(regular('potato', 'rice')) // { 0: 'potato', 1: 'rice' }

const arrowFunction = () => {
  return arguments
}
console.log(arrowFunction('potato', 'rice')) //{ 0: 'potato', 1: 'rice' }

Arrow functions do not have their own arguments. They have access to the arguments of the nearest parent "regular" function.

Return

Arrow functions give you the possibility of making a shortened return without explicitly using the return keyword.


// example 1
function regular () {
  return [1, 2, 3]
}

const arrowFunction = () => [1, 2, 3]

// example 2
function regularObj () {
  return { foo: 1 }
}

const arrowFunctionObj = () => ({ foo: 1 })

Hoisting

JavaScript hoists "regular" function declarations to memory before executing any part of the code. This allows you to use the function before its declaration. With an arrow function, this is not possible, as they are anonymous and assigned to a variable. Therefore, this allocation before code execution doesn't happen. See the example:


console.log(regular()) // 'regular function'

function regular () {
  return 'regular function'
}

console.log(arrowFunction()) // Error: Cannot access 'arrowFunction' before initialization

const arrowFunction = () => 'arrow function'

To make the same code work correctly, you would need to change the order of the arrow function declaration as follows:


const arrowFunction = () => 'arrow function'
console.log(arrowFunction()) // 'arrow function'

Conclusion

Well, I hope to have clarified your mind regarding the use of arrow functions in JavaScript. Sometimes, we forget about the differences in using functions and may end up spending hours debugging errors in our code, all due to carelessness or in pursuit of a simplified syntax.

Be attentive to the presented points and let's code!!!

[PT-BR] Afinal, qual é a diferença entre arrow functions e funções regulares?

Pedro Gustavo — Wed, 19 Jul 2023 02:35:37 +0000

Às vezes, de tanto usarmos um padrão, acabamos nos esquecendo do real motivo pelo qual escrevemos nosso código dessa maneira. Minha intenção neste conteúdo é lembrar você (ou mostrar pela primeira vez) as principais diferenças entre uma função "regular" e uma arrow function.

Começando pelo princípio... O que é uma função mesmo?

O que é uma função?

Eu chamaria uma função de um "mini programa". Nada mais é do que um trecho de código criado para um determinado fim. A sintaxe é bem simples; para isso, você precisa usar a palavra function.

Aqui está um exemplo de uma função que imprime no console um "Olá Mundo!”

function helloWorld () {
    console.log('Olá Mundo!')
}

Certo, agora que estamos todos na mesma página, vamos ao que interessa!

O que é uma arrow function?

A partir do ES6, uma nova possibilidade de sintaxe foi introduzida no JavaScript,
chamada "arrow function". Ela nos permite, entre outras coisas, escrever um código reduzido, sem a necessidade de utilizar a palavra function.

Para obter o mesmo resultado do exemplo de código anterior usando arrow function, teríamos o seguinte código:

const helloWorld = () => console.log('Olá Mundo!')

Porém, além da diferença na sintaxe, existem outras diferenças que quero apresentar a você. São as principais delas, às quais se deve estar atento para não ter problemas indesejados.

Principais diferenças

Contexto

As arrow functions possuem um this dinâmico, ou seja, "seu próprio this". Já as funções regulares herdam o contexto de onde foram declaradas. Deixe-me ilustrar para esclarecer a explicação:

const testfunction = {
  number: 42,
  func: function() {
    return this.number
  }
}
console.log(testfunction.func())
// Output: 42

const testArrowFunction = {
  number: 42,
  func: () =>  {
    return this.number
  }
}
console.log(testArrowFunction.func())
// Output: undefined

No caso da função regular, ela absorve o contexto de sua declaração e, nesse caso, reconhece a propriedade "number". Já a arrow function, como "cria seu próprio this", procura dentro de si mesma a propriedade "number" e, como não encontra, seu retorno é undefined.

Construtor

As arrow functions não podem ser constructors, não é possível fazer uma chamada usando o operador new:

const regular = function() {}
const arrowfunction = () => {}

new regular() // safe...
new arrowfunction() // Error: arrowfunction is not a constructor

Arguments

Ainda devido ao contexto léxico, as arrow functions não têm acesso ao arguments. Um exemplo:

function regular() {
  return arguments
}
console.log(regular('batata', 'arroz')) // { 0: 'batata', 1: 'arroz' }

const arrowFunction = () => {
  return arguments
}
console.log(arrowFunction('batata', 'arroz')) //{ 0:f, 1: window, ... }

As arrow functions não têm arguments. Elas têm acesso ao arguments da função “regular” pai mais próxima.

Retorno

As arrow functions lhe dão a possibilidade de fazer um retorno encurtado
sem a necessidade explícita da utilização da palavra reservada return.

// exemplo 1
function regular () {
  return [1, 2, 3]
}

const arrowFunction = () => [1, 2, 3]

// exemplo 2
function regularObj () {
  return { foo: 1 }
}

const arrowFunctionObj = () => ({ foo: 1 })

Hoisting

O JavaScript adiciona declarações de funções "regulares" na memória antes da execução de qualquer trecho do código. Isso permite que você use a função antes de sua declaração. Com uma arrow function, isso não é possível, já que elas são anônimas e atribuídas a uma variável. Portanto, essa alocação antes da execução do código não acontece. Veja o exemplo:

console.log(regular()) // 'regular function'

function regular () {
  return 'regular function'
}

console.log(arrowFunction()) // Error: Cannot access 'arrowFunction' before initialization

const arrowFunction = () => 'arrow function'

Para que o mesmo código funcione corretamente, seria necessário alterar a ordem da declaração da arrow function da seguinte maneira:

const arrowFunction = () => 'arrow function'
console.log(arrowFunction()) // 'arrow function'

Conclusão

Bom, espero ter esclarecido sua mente em relação ao uso das arrow functions no JavaScript. Às vezes, nos esquecemos das diferenças no uso das funções e podemos perder várias horas debugando erros em nosso código, tudo por descuido ou em busca de uma sintaxe simplificada.

Esteja atento aos pontos apresentados e bora codar!!!