Diário Code

Uma função anônima, como a própria expressão sugere, é uma função que não possui nome. Ela também é chamada de função sem nome, closure e lambda function.

Esse tipo de função dá mais dinamismo ao código e permite usar certos recursos que estariam indisponíveis de outra forma.

Uma função anônima é declarada e executada ao mesmo tempo. Assim que essa função termina sua execução, ela não pode mais ser invocada.

Dá para declarar uma função anônima de 2 formas:

1. Usando function ( );

2. Usando a seta =>. Este segundo método é chamado de Arrow Function.

Vamos ver vários exemplos de funções anônimas neste artigo.

Graças ao recurso de funções anônimas, podemos usar funções como argumentos de outras funções. Isso é especialmente útil ao trabalhar com arrays e filtragem de dados.

Vamos ver neste artigo 3 exemplos de como usar funções anônimas.

Executar uma Função Anônima Imediatamente

Há 2 formas de declarar uma função anônima para que seja executada imediatamente. Veja os exemplos abaixo:

Método 1:

(function ( ) {
  alert("Função anônima executada d:");
}) ( ) ;

Método 2: Arrow Function

( ( ) => {
  alert("Mais uma função anônima executada!! d:");
}) ( ) ;

Note que, nos 2 exemplos, as funções estão envolvidas por parênteses ( ). Elas precisas ser declaradas entre parênteses!

Veja também que, no final, há 2 parênteses ( ). Esses últimos servem para invocar a função. Essa notação é obrigatória para que a função seja executada.

Observe também que as duas funções acima não possuem nome. Ao inseri-las em seu código, elas serão executadas imediatamente, sem a necessidade de serem invocadas.

Mas, e se você quiser usar algum argumento? Para isso, você pode inseri-lo entre os parênteses, da mesma forma que faria numa função normal.

Entretanto, você deve inserir os argumentos nos últimos parênteses, e cada argumento precisa ser uma variável declarada anteriormente. Veja como se deve fazer:

Função anônima com argumento - Método 1

const msg = "Mais outra função anônima executada!! d:";
( function ( ) {
  alert(msg);
}) ( msg ) ;

Função anônima com argumento - Método 2: Arrow Function

const msg = "Mais outra função anônima executada!! d:";
( ( ) => {
  alert(msg);
}) ( msg ) ;

Veja que o argumento msg foi declarado antes para que ele pudesse ser usado dentro da função. Copie e cole esse código no Console do seu navegador e veja se funciona como esperado.

Usar Função Anônima como Argumento

Há inúmeras funções nativas do JavaScript que utilizam uma função anônima em seu argumento. O exemplo que eu gosto de mostrar é a setTimeout ( ).

A função setTimeout ( ) permite executar um comando depois de um determinado tempo. Veja a sintaxe dela:

setTimeout ( function ( ) , int time )

Temos nessa função 2 argumentos: uma função e um número que representa a quantidade de milissegundos a aguardar.

Agora, veja um exemplo de como inserir uma função anônima como argumento de outra função. Cuidado para não se perder entre os parênteses e chaves!

setTimeout ( function ( ) {
  console.log("Esta mensagem será exibida em 5 segundos.");
}, 5000 ) ;

Veja que a declaração da função está exatamente como foi mostrado no exemplo no início deste artigo. Para facilitar a leitura do código, é sempre bom soltar espaços. Observe também que, logo após o fechamento da função, há uma vírgula, indicando que vamos passar para o próximo argumento.

Nesse caso, se você desejar inserir um argumento dentro da função anônima, poderá fazer dessa forma:

const msg = "Esta mensagem será exibida em 5 segundos." ;
setTimeout ( function ( msg ) {
  console.log( msg );
}, 5000 ) ;

Veja que, diferentemente dos primeiros exemplos, a função anônima não está entre parênteses e nem possui aqueles dois parênteses no final. Isso é importante ser observado.

Conseguiu entender? Espero que sim. Veja agora esse mesmo exemplo, mas utilizando Arrow Function:

setTimeout ( ( ) => {
  console.log("Esta mensagem será exibida em 5 segundos.");
}, 5000 ) ;

É praticamente a mesma coisa que no exemplo anterior, mas com a notação de setas.

Se você prestou atenção em todos os exemplos, esse exemplo acima não será difícil de entender. A função anônima está bem ali. Pode copiar esse código inteiro para o Console de seu navegador que você verá a execução dele perfeitamente.

Função Anônima como Valor de uma Variável

Também é possível declarar uma função anônima como valor de uma variável ou constante. Isso é muitíssimo útil para simplificar o código em determinadas situações.

Veja o exemplo abaixo de uma função nomeada sendo usada como valor de uma constante:

Função nomeada:

const imgFoto = document.querySelector("img.fotoAberta");

function verificar_foto_aberta ( ) {
  return (!imgFoto.src == "");
}
const foto_esta_aberta = verificar_foto_aberta ( );

Podemos simplificar esse código com uma função anônima. No próximo exemplo, vamos fazer igual no início, envolvendo toda a função anônima entre parênteses:

Função anônima no valor de uma variável - Método 1

const imgFoto = document.querySelector("img.fotoAberta");
const foto_esta_aberta = ( function ( ) { return (!imgFoto.src == "") } ) ( ) ;

Veja que a função anônima foi declarada dentro do valor de uma variável. Para que a variável receba o valor retornado pela função, é necessário envolvê-la entre parênteses e adicionar aqueles 2 parênteses no final.

Caso você não envolva a função entre parênteses e não coloque os parênteses no final, a variável assumirá a declaração da função como seu valor. Nesse caso, você invocar essa variável como se fosse uma função. Veja como acontece:

Função anônima no valor de uma variável - Método 2

const imgFoto = document.querySelector("img.fotoAberta");
const foto_esta_aberta = function ( ) { return (!imgFoto.src == "") } ;
foto_esta_aberta ( ) ; // executa a função

Percebeu? A função anônima não foi executada usando ( ). Então, constante não assumiu o valor retornado e sim a própria declaração. Daí, é necessário invocar a função no final.

De certo modo, seguir esse método tira o objetivo da função anônima, mas é muito útil ter esse entendimento.

Agora, vou mostrar o mesmo exemplo acima, mas usando uma Arrow Function:

Função anônima no valor de uma variável - Arrow Function

const imgFoto = document.querySelector("img.fotoAberta");
const foto_esta_aberta = ( ( ) => { return (!imgFoto.src == "") } ) ( );

Veja que o raciocínio usado é exatamente o mesmo. Aos poucos, tenho certeza de que você já está enxergando o padrão das funções anônimas.

Agora, você notou a diferença no código? Usando funções anônimas, o código fica mais dinâmico e mais seguro. Afinal, porque funções nomeadas podem ser invocadas pelo próprio visitante do site através do Console do navegador, mas funções sem nome não podem ser invocadas.

Conclusão

Depois de ler sobre tantas vantagens das funções anônimas, você já deve ter percebido que aprender a usar funções anônimas é essencial para o seu desenvolvimento como programador. Talvez no começo seja difícil ler códigos com funções anônimas, mas esse método tem se mostrado extremamente prático e rápido.

Além disso, não é apenas JavaScript que utiliza esse tipo de declaração. Então, com certeza prestar atenção a esses exemplos será de grande ajuda na sua carreira.

Em artigos futuros, vou continuar explicando sobre como usar funções anônimas em outras situações. Espero que você continue me acompanhando! d :