O que são funções de seta em JavaScript

Uma das melhores características que o javascript moderno nos forneceu é o função de seta denotado através de “=>”. Também conhecido como "Arqueiro gordo”Vem com vários benefícios na programação. Ele vem com “isto” encadernação e usar isso faz com que o código pareça mais organizado e mais curto.

Essas funções são a razão pela qual as funções de seta são estritamente preferidas em relação a outros tipos de declaração de função. Mas com essas vantagens também vem algumas desvantagens também.

Neste artigo, aprenderemos a escrever funções usando funções de seta em JavaScript e como converter suas funções simples em funções de seta. Mas antes de entrar nisso, vamos entender alguns conceitos básicos sobre funções de seta em javascript.

Funções de seta em JavaScript

O ES6 nos forneceu um dos recursos mais importantes e úteis que é uma função de seta que ajuda na declaração de funções de uma maneira mais simples e reduz as linhas de código. A sintaxe da função de seta é mencionada abaixo:

Sintaxe:

deixe functionName = (p1, p2,… pn) =>
declarações)

Aqui,

• FunctionName: O nome da função
• P1, P2,… . pn: Estes são os parâmetros das funções
• declarações): As linhas do código JavaScript dentro do corpo da função.

Usando isso, podemos converter nosso código complexo em uma versão mais precisa e compacta. A seguir, alguns dos recursos que ele fornece:

Retorno implícito

Com isso, o uso de qualquer tipo de parênteses, funções ou palavras -chave de retorno se tornam opcionais, permitindo o retorno implícito. Aqui está um exemplo:

// Função de seta
exemplo.OnClick = (x, y, z) =>.faça alguma coisa()
// equivalente à função simples
exemplo.OnClick = função (x, y, z)
devolver isso.faça alguma coisa();
.vínculo (isso);

Através do uso de funções de seta, está simplesmente permitindo apenas uma única expressão e retornando implicitamente.

“Isto” encadernação : Ele liga automaticamente a palavra -chave "isto" ao código cercado por funções de seta. Por exemplo:

var x = this;
exemplo.OnClick = function ()
x.faça alguma coisa();
;

para

exemplo.OnClick = () => Isto.faça alguma coisa()

Além disso, fornece uma versão mais curta, mais simples e compacta do seu código.

Como usar funções de seta no JavaScript

No JavaScript, podemos usar funções de seta com parâmetros únicos, múltiplos ou até nenhum. Eles são úteis para uma ação de uma linha, encolhendo o código de linha múltipla em menos linhas e, portanto, salvando espaço. Vamos entender isso com exemplo:

Função de seta JavaScript sem parâmetros

A seguir a sintaxe é usada quando a função de seta funciona com zero parâmetros.

Sintaxe:

() => declaração (s)

Aqui, a afirmação é o corpo da função que contém linhas de código.

Exemplo:

Deixe print = () => Console.log ("hello");
imprimir();

No exemplo acima, estamos simplesmente imprimindo "Hello" usando a função de seta. Como você pode ver, as funções de seta não têm nenhum nome, então elas também são conhecidas como funções anônimas. Por fim, não podemos ligar ou reutilizá -los novamente quando necessário, pois eles não têm nenhum nome, mas se precisarmos ligar ou reutilizar as funções de seta, precisamos atribuí -los a uma variável e depois chamá -los usando esse nome de variável.

Aqui, nós o atribuímos à variável "impressão" e chamamos a variável na segunda linha.

Saída:

Função de seta JavaScript com um único parâmetro

No caso de um único parâmetro, é usado após a sintaxe:

Sintaxe:

(p) => declaração (s)

Ou você pode remover os parênteses e reescrever como:

p => declaração (s)

Aqui, a afirmação é o corpo da função que contém linhas de código e p O parâmetro é passado.

Exemplo:
Neste exemplo, a função de seta está sendo usada como um argumento do método map () que converte uma matriz de string em uma matriz contendo o comprimento da string:

Let Days = ['Segunda -feira', 'terça -feira', 'quarta -feira'];
Deixe comprimentos = dias.mapa (dias => dias.comprimento);
console.log (comprimentos);

Saída:

Função de seta JavaScript com vários parâmetros

A seguir, a sintaxe é usada ao passar dois ou mais parâmetros:

Sintaxe:

(P1, P2,…, PN) => Declaração;

Aqui, a afirmação é o corpo da função que contém linhas de código e p O parâmetro é passado. Nesta declaração "=>" é equivalente a:

=> declaração de retorno;

No exemplo abaixo, um método Sort () é usado sem usar a função de seta, para classificar os números em ordem decrescente:

deixe num = [3,1,5];
num.Sort (função (a, b)
retornar b - a;
);
console.log (num);

Isso pode ser transformado em uma função de flecha

deixe num = [3,1,5];
num.classificar ((a, b) => b - a);
console.log (num);

No exemplo acima, a função tem uma única expressão "b-a", então simplesmente retorna o resultado da expressão. Mas em caso de sintaxe do bloco, você deve mencionar a palavra -chave de retorno.

Saída:

Dessa forma, podemos transformar qualquer função em uma função de seta. Mas há dois pontos que precisam ser lembrados ao trabalhar com funções de seta:

• A função de seta não deve ser usada para a criação de métodos dentro de objetos
• As funções de seta não podem ser usadas como construtor.

Conclusão

As funções de seta são a maneira mais fácil de declarar quaisquer funções e reduz as linhas dos códigos, sem afetar a funcionalidade do código. Neste artigo, aprendemos que as funções de seta são extremamente úteis, como elas convertem uma sintaxe complexa e uma longa linha de código em código mais compacto e mais simples. Além disso, não é necessário nomear uma função de seta, a menos que você ligue ou reutilize a função.

No começo, as funções de seta podem parecer difíceis, mas com o tempo que você entende o conceito, elas se tornam mais fáceis e convenientes de implementar. Portanto, convertendo seu código em menos linhas com lógica mais simples.