Memoização: não é a técnica da sua avó para lembrar coisas.

Primeiramente, devo dizer que não está escrito errado! A memoização é uma técnica utilizada para agilizar a velocidade de funções criando um cache de resultados. É como dar à sua função um caderno para anotar as respostas e não ter de calcular as coisas novamente, inteligente, não é?

Um rápido adendo: funções puras

Uma função pura é uma função que possui as seguintes características:

1. Determinística: Para os mesmos inputs, sempre retorna o mesmo output.
2. Sem efeitos colaterais: Não modifica nenhum estado fora de seu escopo local.
3. Não depende de estado externo: Seu resultado depende apenas dos argumentos passados.

Exemplo:

// Função não pura ❌
function add(){
  const a = prompt(`Numero 1:`);
  const b = prompt(`Numero 2:`);
  return a + b;
}

let total = 0;
// Função não pura ❌
function somaAoTotal(valor) {
  total += valor;
  return total;
}

// Função pura ✅
function add(a, b){
  return a + b;
}

Para realizar a memoização é imprescindível que ela seja feita com funções puras.

Memoizando o último valor calculado

Imagine que você tem uma aplicação de frontend com um botão que realiza um cálculo complexo que demora 200 ms para ser concluído. Caso o usuário clique desesperadamente neste botão o navegador simplesmente irá ficar por momentos travado, como podemos resolver um problema como este? Memoização

Para isso, vamos criar uma função utilitária para adicionar memoização à nossa função custosa

function memoizeLastResult(fn) {
  // Armazena os argumentos da última chamada
  let lastArgs = null;
  // Armazena o resultado da última chamada
  let lastResult = null;

  // Retorna uma nova função que envolve a função original
  return function(...args) {
    // Compara os argumentos atuais com os da última chamada
    // Usa JSON.stringify para comparar arrays/objetos profundamente
    if (JSON.stringify(args) === JSON.stringify(lastArgs)) {
      // Se os argumentos são iguais, retorna o resultado cacheado
      return lastResult;
    }
    
    // Se os argumentos são diferentes:
    // 1. Atualiza lastArgs com os argumentos atuais
    lastArgs = args;
    // 2. Chama a função original e armazena o resultado
    lastResult = fn.apply(this, args);
    // 3. Retorna o novo resultado
    return lastResult;
  };
}

// Uso:
// const memoizedFn = memoizeLastResult(originalFunction);
// memoizedFn() agora terá o comportamento de memoização

Assim, na próxima chamada da função memoizada o resultado virá instantâneamente com o último valor calculado.

Exemplo:

// Função que simula um cálculo custoso
function calcularAreaComplexa(largura, altura) {
  console.log(`Calculando área para ${largura} x ${altura}...`);
  
  // Simulando um cálculo demorado
  let resultado = 0;
  for (let i = 0; i < 1000000; i++) {
    resultado += largura * altura;
  }
  
  return resultado / 1000000;
}

// Aplicando memoização à função de cálculo
const calcularAreaMemoizada = memoizeLastResult(calcularAreaComplexa);

// Exemplos de uso
console.time("Primeira chamada");
console.log(calcularAreaMemoizada(5, 3));
console.timeEnd("Primeira chamada");

console.time("Segunda chamada (mesmos argumentos)");
console.log(calcularAreaMemoizada(5, 3));
console.timeEnd("Segunda chamada (mesmos argumentos)");

console.time("Terceira chamada (argumentos diferentes)");
console.log(calcularAreaMemoizada(6, 4));
console.timeEnd("Terceira chamada (argumentos diferentes)");

console.time("Quarta chamada (argumentos iguais aos da terceira)");
console.log(calcularAreaMemoizada(6, 4));
console.timeEnd("Quarta chamada (argumentos iguais aos da terceira)");

Neste exemplo temos o seguinte resultado

Calculando área para 5 x 3... 15 Primeira chamada: 2.713134765625 ms 15 Segunda chamada (mesmos argumentos): 0.02294921875 ms Calculando área para 6 x 4... 24 Terceira chamada (argumentos diferentes): 0.761962890625 ms 24 Quarta chamada (argumentos iguais aos da terceira): 0.017822265625 ms

Assim podemos observar que entre a primeira chamada e a segunda com os mesmos argumentos houve uma diminuição ABSURDA no tempo de resposta! Porém, ao trocar os argumentos, não haverá mais o benefício da memoização, sendo assim, uma técnica que não servirá tão bem a funções que são constantemente invocadas com diferentes parâmetros.

Memoizando todos valores calculados

Este método não apenas memoiza o último valor, mas, todos os resultados calculados utilizando de um map.

function memoizeAll(fn) {
  // Cria um Map para armazenar os resultados cacheados
  // Map é usado em vez de um objeto simples para melhor performance com chaves complexas
  const cache = new Map();

  // Retorna uma nova função que envolve a função original
  return function(...args) {
    // Converte os argumentos em uma string para usar como chave do cache
    // JSON.stringify é usado para lidar com argumentos que são objetos ou arrays
    const key = JSON.stringify(args);

    // Verifica se o resultado para estes argumentos já está no cache
    if (cache.has(key)) {
      // Se estiver no cache, retorna o resultado armazenado
      return cache.get(key);
    }

    // Se não estiver no cache, executa a função original
    // 'apply' é usado para preservar o contexto 'this' e passar os argumentos
    const result = fn.apply(this, args);

    // Armazena o resultado no cache para uso futuro
    cache.set(key, result);

    // Retorna o resultado calculado
    return result;
  };
}

// Uso:
// const memoizedFn = memoizeAll(originalFunction);
// memoizedFn() agora terá o comportamento de memoização completa

Neste caso haverá um aumento de performance em todas chamadas com argumentos repetidos, porém, conforme alteramos os argumentos da chamada à função memoizada nosso map continuará crescendo.

Portanto, esta solução troca um desempenho mais rápido por um crescimento de memória potencialmente ilimitado. Nos piores casos, isso pode resultar na falha da guia do navegador, especialmente se cada resultado usar uma parte significativa da memória (por exemplo, uma árvore DOM).

---

Além destas formas, você pode também implementar algo como memoização apenas nos últimos N resultados para que não haja um crescimento ilimitado na memória utilizada ou até mesmo utilizar de um WeakMap que poderá ser automaticamente limpo sempre que o objeto chave não existir mais.

Por fim, a memoização é uma técnica para que seu programa se torne mais performático utilizando de cache em funções específicas que são chamadas com uma elevada frequência e cabe a você entender onde ele poderá ou não ser utilizado.

E você, já conhecia essa técnica? Já viu sua utilização em algum lugar além do famigerado memo/useMemo do React?