As funções de seta são mais compactas, mas você sabia que há uma série de outras diferenças que elas apresentam?

As funções são uma parte essencial do JavaScript que você precisa usar para escrever código reutilizável. Os dois principais tipos de função são funções regulares e de seta, e há muitas maneiras de defini-las.

Mesmo que preencham necessidades semelhantes, eles têm algumas diferenças críticas que podem influenciar fundamentalmente como você os usa em seu código. Aprenda tudo sobre várias diferenças entre funções de seta e funções regulares.

1. Diferenças de sintaxe

A sintaxe que você escolhe ao desenvolver funções JavaScript tem um grande impacto em como é simples ler e compreender seu código. A sintaxe das funções regulares e de seta difere significativamente, afetando a maneira como você as escreve e as usa.

Funções de seta do JavaScript use uma estrutura de linguagem menor que seja mais compreensível. Você pode usá-los para criar funções combinando-os em uma única expressão ou instrução.

instagram viewer 
const adicionar = (a, b) => a + b;

Neste exemplo, o adicionar função aceita duas entradas, a e b, e retorna seu total. O => sign define isso como uma função de seta.

Por outro lado, definir uma função regular requer o uso do método função palavra-chave, com uma sintaxe mais detalhada, conforme mostrado neste exemplo:

funçãoadicionar(a, b) {
retornar a + b;
}

Neste exemplo, o função palavra-chave define uma função regular que também usa chaves e o retornar declaração.

As funções regulares são mais úteis para sintaxes complexas que exigem várias instruções ou expressões. Por outro lado, as funções de seta usam uma sintaxe mais concisa que pode tornar seu código mais fácil de ler e entender.

2. Diferenças de Escopo

O termo "escopo" descreve como as variáveis ​​e funções internas de uma função são acessíveis. Em JavaScript, você define e acessa variáveis ​​e funções em todo o seu código usando escopo. Seus distintos o escopo pode impactar significativamente como você escreve e usa JavaScript seta e funções regulares.

No escopo, como as funções de seta lidam com o esse palavra-chave difere significativamente de como as funções normais fazem. As funções regulares definem o esse próprias palavras-chave; portanto, pode mudar dependendo do contexto em que você chama a função.

Por outro lado, porque não especificam o esse palavra-chave, funções de seta usam o mesmo esse como o escopo estático que os cerca.

Para ver a diferença, confira o exemplo a seguir. Digamos que você tenha um pessoa objeto com um nome propriedade e um método chamado digaNome() que registra o nome da pessoa usando uma função regular:

const pessoa = {
 nome: 'John,'
 dizerNome: função() {
console.registro(esse.nome);
 }
};
pessoa.dizerNome(); // registra 'João'

Aqui, a função regular sayName() é um método do objeto person e o esse a palavra-chave dentro dessa função refere-se a esse objeto pessoa.

Vamos agora tentar a mesma coisa com uma função de seta:

const pessoa = {
 nome: 'John',
 dizerNome: () => {
console.registro(esse.nome);
 }
};
pessoa.dizerNome(); // registra indefinido

Como a função de seta usada no digaNome() método não define seu próprio esse palavra-chave, ele usa o esse do escopo estático que o envolve. Nesse caso, esse é o escopo global da instância.

Como resultado, quando você chama pessoa.dizerNome(), você consegue indefinido em vez de "John." Isso pode afetar significativamente como você escreve e usa funções em seu código.

3. Casos de uso e práticas recomendadas

Funções regulares são mais adequadas para funções que requerem sua própria esse palavra-chave, como métodos em um objeto.

As funções de seta são mais adequadas para programação funcional e callbacks que não requerem esse palavra-chave.

4. Diferenças de ligação de função

Ligação de função é o termo usado para descrever a relação entre esse palavras-chave e funções em seu código. As variações na ligação de função entre funções de seta e funções normais podem impactar fortemente como você constrói e usa funções de seta.

Usando o esse A palavra-chave a torna única em funções regulares e associa-se a vários objetos com base no método usado para chamar a função. A ligação de função é uma das distinções mais importantes entre funções regulares e de seta.

Em contraste, as funções de seta não têm esse palavra-chave; em vez disso, eles o obtêm dos escopos circundantes.

Vejamos um exemplo para entender mais sobre essa diferença. Suponha que você tenha um pessoa objeto com um nome campo e um método chamado digaNome() que usa uma função regular para registrar o nome da pessoa:

const pessoa = {
 nome: 'John',
 dizerNome: função() {
console.registro(esse.nome);
 }
};


const outraPessoa = {
 nome: 'Jane'
};
pessoa.dizerNome.call (outraPessoa); // registra 'Jane'

Neste exemplo, você chama o nome do objeto pessoa digaNome() método com o valor outra pessoa usando o chamar() método. Por causa disso, o digaNome() método, esse, a palavra-chave está vinculada ao outra pessoa objeto, e ele registra "Jane" em vez de "John."

Vamos agora usar a mesma coisa com uma função de seta:

const pessoa = {
 nome: 'John',
 dizerNome: () => {
console.registro(esse.nome);
 }
};


const outraPessoa = {
 nome: 'Jane'
};
pessoa.dizerNome.call (outraPessoa); // registra indefinido

Desde o digaNome() técnica não possui sua própria palavra-chave, você está usando uma função de seta dentro dela neste exemplo. Nesse caso, a função de seta herda as propriedades do escopo circundante, que é o escopo global.

Isso significa que quando você executa person.sayName.call (anotherPerson), a função de seta esse palavra-chave permanece o objeto global e indefinido toma o lugar de Jane no registro.

Se você precisar vincular uma função a um determinado esse valor, uma função comum pode ser preferível. No entanto, se você não precisar vincular uma função a um determinado esse value, uma função de seta pode ser mais curta e fácil de entender.

5. Devolução implícita

A função de seta tem um recurso de retorno implícito. Se o corpo da função consistir em uma única expressão, as funções retornarão essa expressão.

Como um exemplo:

const duplo = (x) => x* 2;

Esta função de seta retorna um duplo de um parâmetro. Você não precisa usar um explícito retornar palavra-chave porque o corpo da função tem apenas uma expressão.

6. Diferenças de compatibilidade

As diferenças de compatibilidade referem-se às funções de seta adicionadas do ECMAScript 6, que podem não funcionar com navegadores ou ambientes mais antigos. Por outro lado, as funções regulares existem desde o início do JavaScript e são amplamente suportadas.

Aqui está uma ilustração de uma função de seta que pode não funcionar em condições mais estabelecidas:

const adicionar = (a, b) => a + b;

O seguinte é uma função regular comparável que deve funcionar na maioria das situações:

funçãoadicionar(a, b) {
retornar a + b;
}

Use funções regulares em vez de funções de seta ao direcionar ambientes mais antigos para garantir a compatibilidade. No entanto, as funções de seta podem fornecer uma sintaxe mais fácil de entender e mais condensada ao trabalhar com navegadores e ambientes modernos.

Escolhendo entre funções de seta e funções regulares em JavaScript

Em JavaScript, seta e funções regulares possuem recursos e aplicações distintas. As funções de seta têm uma sintaxe simples, herdando esse termo-chave do contexto de seu uso, enquanto as funções regulares são mais adaptáveis ​​e podem lidar com situações mais complexas.

É fundamental saber como eles diferem e como usá-los de acordo com os requisitos do seu código. Ao selecionar qual tipo de função usar, você também deve considerar as diferenças de compatibilidade.

Em última análise, a seta e as funções regulares do JavaScript são ferramentas poderosas que ajudam você a escrever um código mais limpo e eficiente.