Callbacks em

Sobre Callbacks

As funções callback são funções passadas como argumentos a outras funções. A função de callback pode depois ser invocada para desencadear uma ação subsequente. Muitas vezes, as callbacks são usadas para tratar os resultados de um trabalho feito, ou para tratar uma ação quando ocorre um evento. As funções callback podem ser usadas em programação síncrona e assíncrona.

const sideLength = 5;

// Caller function takes a callback function
function applySideLength(callback) {
  return callback(sideLength);
}

// Callback must expect the possible argument from the calling function
function areaOfSquare(side) {
  return side * side;
}

applySideLength(areaOfSquare); // => 25

Também podes escrever callbacks como uma expressão de função:

applySideLength(function squarePerimeter(side) {
  return side * 4;
});

Este é um padrão útil em JavaScript, porque o JavaScript foi concebido como um ambiente de execução de thread única, onde só pode ser executada uma chamada de função de cada vez. Durante a execução, o ambiente não consegue responder a outros eventos nem continuar a execução enquanto a função não devolver o controlo.

Muitas chamadas à API (funções de I/O, temporizadores e ouvintes de eventos) usam um mecanismo assíncrono para colocar a chamada de função atual de lado até o trabalho estar concluído. Quando o trabalho termina, a função callback é colocada na fila de mensagens, para que, quando o ambiente de execução estiver entre chamadas de função, as mensagens sejam processadas ao invocar a função callback.

Também é útil usar funções callback porque podem referenciar variáveis no âmbito da sua closure, que não estão disponíveis para a função onde são mais tarde invocadas.

Exemplos concretos de funções callback

Manipuladores de eventos

Os manipuladores de eventos são um caso de uso comum das callbacks em JavaScript. Eventos do navegador como 'onload' ou 'onclick' são sinais que podem desencadear a invocação de funções. O método addEventListener de um objeto DOM [Document Object Model regista uma função de callback para ser invocada quando "ouve" que ocorreu um evento.

document.addEventListener('onload', function () {
  alert('The webpage has now been loaded');
});

Convenção do Node.js

No Node.js, as funções de callback seguem uma convenção para controlar o fluxo de um programa. Seguem este padrão: o primeiro argumento da função de callback pode receber um Error ou null; o segundo argumento e os seguintes recebem os dados que a função que chama está concebida para enviar.

Se ocorrer um erro, o segundo argumento e os seguintes podem não estar presentes, por isso não podes contar com eles.

function operation(a, b, callback) {
  // Work ...

  if (/* an error occurs */) {
    return callback(new Error('An error occurred'))
  }

  // On success:
  callback(null, data)
}

function callback(error, returnedData) {
  if (error) {
    // An error occurred, handle it here.
    return
  }

  // No error occurred, continue with the returned data.
}

operation(1, 2, callback)

Vês este padrão frequentemente ao lidar com funções assíncronas para ajudar no controlo do fluxo.

Callbacks disfarçadas

As funções Array comuns usam funções de callback para definir o seu comportamento:

• Array.prototype.forEach:

  • Aceita uma callback, que aplica a callback a cada elemento de um array.

    [1, 2, 3].forEach(function (element) {
      doSomething(element);
    });
    // => doSomething() is invoked 3 times, once with each element
    

• Array.prototype.map

  • Aceita uma callback, que aplica a callback a cada elemento de um array, usando o resultado para criar um novo array.

    [1, 2, 3].map(function (element) {
      return element + 1;
    });
    // => [2, 3, 4]
    

• Array.prototype.reduce

  • Aceita uma callback, que aplica a callback a cada elemento de um array, passando o resultado adiante para a invocação seguinte.

    [1, 2, 3].reduce(function (runningSum, element) {
      return runningSum + element;
    }, 0);
    // => 6