Callback: entenda essa função de Javascript na prática!

Você sabe o que significa chamada de retorno? O termo mais utilizado para descrever essa ação em JavaScript é chamado callback. Na prática, é um recurso utilizado pela linguagem, no qual uma função chama por outra para fazer uso do resultado processado por essa segunda chamada ou para executar uma ação específica. Ficou meio confuso, não é?

Realmente, em um parágrafo não é possível descrever em detalhes como funciona esse processamento. Entretanto, esse é um recurso muito utilizado, portanto, é preciso compreender o seu mecanismo.

Dessa forma, fizemos este post para esclarecer a você o que é callback, de que forma ele é utilizado em JavaScript e como ele funciona na prática. Continue a leitura para saber mais:

• O que é callback
• Como o callback funciona na prática

Boa leitura!

Basicamente, callback é um tipo de função que só é executada após o processamento de outra função. Na linguagem JavaScript, quando uma função é passada como um argumento de outra, ela é, então, chamada de callback.

Isso é importante porque uma característica dessa linguagem é não esperar o término de cada evento para a execução do próximo. Portanto, ela contribui para controlar melhor o fluxo de processamento assíncrono. Para ilustrar a explicação, imagine o seguinte bloco de código:

function primeiroBloco(){
	// Aguardar 5 segundos
    setTimeout( function(){
    console.log('Esse é o primeiro bloco de comandos após 5 segundos');
    }, 5000 );
}
function segundoBloco(){
	console.log('Esse é o segundo bloco de comandos');
}
primeiroBloco();
segundoBloco();

Ao executar o código em um navegador, o retorno será o seguinte:

“Esse é o segundo bloco de comandos”.

“Esse é o primeiro bloco de comandos após 5 segundos”.

Observe que as mensagens foram exibidas fora da ordem, o que demonstra como o JavaScript pode funcionar ao processar os blocos de código, ou seja, mesmo sem terminar o primeiro bloco, o segundo foi iniciado. Portanto, para fazer com que as mensagens sejam exibidas na ordem desejada, é preciso utilizar a função callback. Confira, a seguir, como deve ficar o código ao adicionar esse recurso.

function exibeMensagensNaOrdem(mensagem, callback) {
	console.log(mensagem);
	callback();
}
exibeMensagensNaOrdem('Essa é a primeira mensagem exibida na ordem', function() {
	console.log('Essa é a segunda mensagem exibida na ordem');
});

Ao executar o código no navegador, o retorno será:

“Essa é a primeira mensagem exibida na ordem.”

“Essa é a segunda mensagem exibida na ordem.”

Portanto, ao utilizar a função callback, o JavaScript mantém a ordem de execução desejada para os blocos de código. Vale ressaltar que existem outras formas para escrever esse código e utilizar a função callback. Confira, a seguir, outra maneira de escrever esse algoritmo e que apresentará o mesmo resultado.

function exibePrimeiraMensagem (mensagem, callback) {
	console.log(mensagem);
	callback();
}
function exibeSegundaMensagem(){
	console.log('Essa é a segunda mensagem do novo exemplo');
} 
exibePrimeiraMensagem ('Essa é a primeira mensagem do novo exemplo'', exibeSegundaMensagem);

É importante dizer que a utilização de diversos callbacks juntos dentro de incontáveis laços if / else não é considerada uma boa prática. Essa ação é conhecida como callback hell, que em português significa “inferno de retorno de chamada”. Isso porque essa forma de utilizar o recurso pode fazer com que o fluxo se perca, além de dificultar a compreensão.

A melhor forma de aprender como o callback funciona é na prática. Como dissemos, o objetivo do recurso é não bloquear a execução do código enquanto outra atividade é executada. No código a seguir, vamos exibir quatro mensagens, sendo que para a leitura de uma delas é preciso fazer a leitura de um arquivo externo do tipo txt.

Vale ressaltar que para que seja possível executar esse código é necessário a utilização do Node.js, que basicamente funciona como uma plataforma em que é possível executar a aplicação e que, entre outras funcionalidades, possibilita a utilização do módulo File System (fs), o que permite a manipulação de arquivos com maior facilidade pelo JavaScript. Confira o código a seguir.

var fs = require('fs'); 
console.log("Primeiro comando");
fs.readFile('./arquivo.txt', callback);
function callback(err, conteudo){
	if (err) return console.error(err);
    console.log(String(conteudo));
}
console.log("Segundo comando");
console.log("Terceiro comando");

A leitura de um arquivo leva mais tempo que a exibição da mensagem na console. Por isso, ao executar o código acima, o resultado do comando que realiza a operação de leitura será o último a ser exibido, ou seja, os dois últimos comandos para exibir a segunda e terceira mensagens são executados antes que se conclua a leitura do arquivo txt.

Agora, vamos explicar o código parte a parte. A primeira linha é um comando para permitir a utilização do File System.

var fs = require('fs'); 

A seguir, exibimos a primeira mensagem na console e começamos a leitura do arquivo txt por meio do comando:

fs.readFile('./arquivo.txt', callback);

Perceba que é feita a leitura do arquivo e a chamada de uma função callback, que está declarada nas próximas linhas:

function callback(err, conteudo){
	if (err) return console.error(err);
    console.log(String(conteudo));
}

Como vamos ler um arquivo externo, é considerado uma boa prática de programação fazer o tratamento de erro. Dessa forma, caso ocorra algum problema que impeça a leitura do arquivo não há uma interrupção brusca do código, além de facilitar a identificação do problema. Por isso, colocamos a seguinte instrução dentro da função callback:

if (err) return console.error(err);

Portanto, se tudo correr bem na leitura do arquivo, o seu conteúdo será exibido na console, conforme o código a seguir:

console.log(String(conteudo));

As próximas linhas são para exibir as duas outras mensagens na console. Ao depurar o código em um navegador ou em qualquer outra ferramenta apropriada, o resultado exibido será o seguinte:

“Primeiro comando.”

“Segundo comando.”

“Terceiro comando.”

“Olá, esse é o conteúdo do arquivo!”

Como você pôde perceber a mensagem referente à leitura do arquivo é a última, o que demonstra que o callback cumpriu a sua função de não interromper o fluxo de comandos, ou seja, as instruções continuaram a ser executada sem que houvesse uma pausa na tela para concluir a leitura do arquivo externo.

A utilização da função callback é uma excelente alternativa para controlar o fluxo de processamento assíncrono na linguagem JavaScript. Existem diferentes formas para aplicá-la no código, no entanto, é preciso observar as boas práticas para não exagerar no emprego desse recurso.

Gostou do nosso conteúdo sobre como utilizar function callback? Então, não deixe de conferir outros textos sobre tecnologia.