Funções Anônimas em JavaScript

Na aula de hoje, você irá aprender de forma prática o que são as funções anônimas em JavaScript, sua importância, além de quando e como utilizá-las.

Funções anônimas em JavaScript são funções sem nome, criadas no ponto em que serão usadas — em geral como callbacks: botao.addEventListener('click', function() { ... }). Elas evitam poluir o código com nomes desnecessários e são a base de padrões modernos, incluindo as arrow functions.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: A aula explica o que é uma função anônima em JavaScript: uma função sem nome, definida no próprio lugar em que será usada. Você monta um botão com addEventListener, primeiro passando uma função nomeada e depois trocando-a por function () {} direto no segundo argumento, e entende quando isso dispensa declarar uma função usada uma única vez.

Neste vídeo (12 min):

• 1:00 - Um <button> com o texto Clique aqui e um id para o JavaScript conseguir identificá-lo na página
• 2:00 - Abrir a página com o Live Server: o botão aparece, mas o clique ainda não faz nada
• 2:30 - Criar o arquivo script.js: o nome é livre, o que importa é manter a extensão .js
• 3:05 - document.getElementById() recupera o botão pelo id a partir da página que o navegador montou
• 4:00 - const botao guarda a referência ao elemento para o código poder manipulá-lo
• 4:30 - addEventListener dá ao botão a capacidade de escutar um evento e reagir a ele
• 5:00 - O primeiro argumento é o evento 'click'; o segundo, a função que define como o botão reage
• 5:35 - Declarar uma função nomeada, sem parâmetros, que chama alert() avisando que o botão foi clicado
• 7:05 - Vincular o JavaScript ao HTML com <script src="./script.js"> no final do <body> e testar o alerta no clique
• 8:00 - Por que a função nomeada sobra: ela só existe para responder ao clique daquele botão
• 9:05 - Trocar o nome pela definição direta, function () { alert(...) }, dentro do addEventListener, com o mesmo resultado
• 10:15 - Quando usar: em funções que esperam receber outra função, como a que responde a um evento

Trechos do vídeo:

• Uma função anônima é uma função sem nome: como é definida no ponto em que será usada, ninguém precisa chamá-la pelo nome
• O addEventListener recebe o tipo de evento, como 'click', e a função que deve rodar quando esse evento acontecer
• Quando uma função existe só para responder ao clique de um botão, declará-la com nome em outro trecho é desnecessário; ela pode ser escrita direto como argumento
• O document representa a página que o navegador construiu a partir do HTML, e getElementById devolve dele o elemento com o id informado

JavaScript Impressionador

Como usar JavaScript em qualquer empresa e qualquer área, com exemplos totalmente aplicados à realidade do Mercado de Trabalho, seja para se tornar um Desenvolvedor Front End, Backend, Full Stack ou Mobile.

Começar agora

Funções Anônimas em JavaScript

Nesta aula, vamos aprender sobre as funções anônimas em JavaScript. Vou te mostrar o que são essas funções, como elas funcionam, além de quando e como você as utilizará.

Você aprenderá que essas funções, que são funções sem nome, têm usos específicos e não são aplicadas em todas as situações.

Diferentemente das funções tradicionais em JavaScript que utilizamos várias vezes ao longo de um código, as funções anônimas em JavaScript são aplicadas em contextos e locais particulares.

É importante que você acompanhe esta aula utilizando algum editor de códigos para praticar. Isso facilitará a compreensão e o aprendizado dos conceitos que abordaremos. Eu recomendo o uso do Visual Studio Code, que é o mesmo editor que estarei utilizando.

Criando o Arquivo HTML

Vamos começar nosso código abrindo o Visual Studio Code em uma pasta escolhida para o nosso projeto e criando o arquivo index.html.

Depois de criado o arquivo HTML, podemos digitar o símbolo de exclamação (!) na primeira linha e pressionar “enter”. O Visual Studio Code gerará a estrutura base de um arquivo HTML.

O código será este:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

A partir desse código, vamos inserir uma tag <button> dentro da tag <body>, da seguinte forma:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="botao-funcao"> Clique aqui </button>
</body>
</html>

Essa tag <button> será responsável por exibir um botão dentro de uma página HTML. O texto exibido será “Clique aqui” e o id “botao-funcao” é o que usaremos para identificar esse botão.

Agora que nosso código está pronto, clique com o botão direito sobre ele e selecione a opção Open with Live Server. Se você ainda não tem o Live Server instalado, dê uma olhada novamente na aula de instalação do Visual Studio Code.

Depois de seguir esses passos, sua página se abrirá no navegador, exibindo um botão com o texto “Clique aqui”. No entanto, por enquanto, ele não terá nenhuma ação quando pressionado.

Criando o Arquivo JavaScript

Agora vamos atribuir uma funcionalidade a esse botão, e para isso, usaremos o JavaScript. Portanto, vamos criar um novo arquivo chamado script.js. Você pode escolher o nome que preferir, mas a extensão deve ser .js para indicar que é um arquivo JavaScript.

Dentro desse arquivo, iremos selecionar o elemento do botão utilizando o seguinte código:

const botao = document.getElementById(‘botao-funcao’);

Nesse contexto, o document se refere ao objeto que representa a estrutura e o conteúdo da nossa página HTML. O método getElementById() nos permite recuperar um elemento específico do nosso HTML, passando como parâmetro o id desejado.

No nosso caso, o id é “botao-funcao”. E a referência ao botão da página HTML será armazenada na variável botao.

Com essa referência em mãos, podemos manipular o botão no JavaScript. Por exemplo, vamos dar a ele a capacidade de “ouvir” um evento, ou seja, aguardar que algo aconteça para então reagir de alguma forma. Faremos isso usando o método addEventListener().

Para usar esse método, precisamos fornecer duas informações: qual evento o elemento deve esperar e como ele deve reagir. Geralmente, essa reação é uma função, então precisamos criá-la também.

const botao = document.getElementById('botao-funcao');

function alerteUsuario() {
    alert('Botão foi clicado pelo usuário');
}

botao.add.EventListener('click', alerteUsuario);

A função alertarUsuario() executará a função alert, que já existe no JavaScript, exibindo um alerta com a mensagem “O botão foi clicado pelo usuário”.

Para que isso ocorra, definimos o evento dentro do addEventListener() como ‘click’, identificando quando o botão é clicado. Em seguida, definimos a reação, que é a função alertarUsuario que criamos.

Integrando o arquivo JavaScript ao HTML

Para finalizar, precisamos conectar nosso arquivo JavaScript ao HTML. Fazemos isso adicionando a tag <script> dentro do <body> do documento, e usando o atributo src para indicar o caminho do nosso arquivo JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="botao-funcao"> Clique aqui </button>
    <script src="./script.js"></script>
</body>
</html>

Dessa maneira, nosso arquivo HTML e arquivo JavaScript estarão vinculados. Agora, ao clicar no botão da página, receberemos um alerta.

Funções Anônimas

Agora, como é que tudo isso se relaciona com as funções anônimas em JavaScript?

Vamos observar a função que definimos exclusivamente para ser executada quando o botão é clicado. Essa é uma função que muito provavelmente não será usada em outras partes do código, e a construímos apenas para responder ao clique desse botão.

Isso é algo bastante comum. Muitas vezes, ao criar uma página, definimos uma função que corresponde apenas à ação de um botão.

Nesse caso, em vez de definir essa função fora do nosso addEventListener, podemos fazer isso diretamente dentro dele. E como essa função não será chamada em nenhum outro lugar, ela não precisa ter um nome; podemos defini-la assim:

botao.addEventListener('click', function (){
    alert('Botão foi clicado pelo usuário');
})

Se fizermos essa alteração em nosso código JavaScript, salvá-lo e clicar no botão, obteremos o mesmo resultado que tínhamos anteriormente.

const botao = document.getElementById('botao-funcao');

botao.addEventListener('click', function () {
    alert('Botão foi clicado pelo usuário');
});

Ao definirmos a função exatamente onde ela será usada, ela não necessita de um nome, já que será invocada diretamente dentro do método addEventListener.

As funções anônimas no JavaScript geralmente são empregadas em situações como essa, quando trabalhamos com métodos ou funções que recebem outra função como argumento, e que será executada internamente.

Perguntas frequentes

Conclusão – Funções Anônimas em JavaScript

Durante esta aula, você aprendeu por meio de um exemplo prático, envolvendo a criação de um botão em uma página HTML, como criar e aplicar funções anônimas em JavaScript de maneira fácil e direta.

Essas funções são amplamente utilizadas no JavaScript, e compreender bem o seu funcionamento e aplicação irá otimizar significativamente o desenvolvimento dos seus códigos.

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!