Padrão JumpTable com Javascript

JumpTable Pattern

O JumpTable é uma forma inteligente de evitar grandes trechos de if-else ou switch-case no seu código. A ideia principal consiste em você mapear em um objeto com chaves para funções ou blocos de código.

Dependendo do caso, com um simples objeto, você consegue substitui-lo pelos bons e velhos if-else ou switch-case, você simplesmente olha para uma "tabela" usando a chave que tem em mãos e encontra a função certa para executar.

Isso deixa tudo mais limpo e direto, especialmente quando você tem muitas ações diferentes que dependem de condições variadas. É como organizar o caos numa ordem que faz sentido e é fácil de seguir.

Exemplos

Vamos supor que você tenha um aplicativo que executa ações diferentes com base em comandos de texto que recebe, como "create", "edit" ou "delete".

Sem usar JumpTable, você poderia fazer algo parecido com isso:

function runCommand(command) {
  if (command === "create") {
    console.log("Criando item...");
  } else if (command === "edit") {
    console.log("Editando item...");
  } else if (command === "delete") {
    console.log("Deletando item...");
  } else {
    console.log("Comando inválido!");
  }
}

runCommand("create") // Retorna o texto "Criando item..."

Com o padrão JumpTable, o código fica assim:

const commands = {
  create: () => console.log("Criando item..."),
  edit: () => console.log("Editando item..."),
  delete: () => console.log("Deletando item..."),
  default: () => console.log("Comando inválido!"),
};

function runCommand(command) {
  // Se "command" existir dentro de "commands", retorna o item com o nome correspondente
  // Se "command" não existir, retorna o item `default`
  const action = commands[command] || commands.default;

  // Apenas executa a função atribuída a variável
  return action();
}

runCommand("create") // Retorna o texto "Criando item..."
runCommand("new") // Retorna o texto "Comando inválido!"

Vamos dar uma olhada no que acabamos de ver no código. O objeto commands é o JumpTable. Ele conecta cada comando com uma função específica.

Quando chamamos a função runCommand, ela vai consultar o objeto commands, procurando pela chave que a gente passou pra ela por parâmetros. Se achar essa chave, ótimo, ela traz de volta o que encontrou. Se não achar, ela vai pegar a propriedade default do objeto commands e retornar como se fosse um plano B.

Esse padrão é muito útil para tornar o código mais organizado e fácil de expandir. Se você quiser adicionar um novo comando, basta adicionar uma nova chave e função ao objeto commands e é apensa isso, sem a necessidade de modificar a estrutura condicional existente. Ou seja, apenas modificando o objeto commands você é capaz de incluir ou remover novos comandos do seu código.

Aplicando JumpTable no React

Para um aplicativo React, o padrão JumpTable pode ser uma boa alternativa para simplificar a lógica de seleção de comportamentos baseados em condições específicas.

A integração com estados e props, em cenários onde a lógica do componente depende do estado atual ou props recebidas, um JumpTable pode ajudar a decidir qual componente renderizar sem recorrer a múltiplos if-else ou switch-case por exemplo.

Vamos pensar em um exemplo do dia a dia. Imagine o componente HomePage, que é tipo a vitrine que mostra vários estilos de layout diferentes, dependendo de quem tá navegando pelo app. A responsabilidade dele é mudar o visual conforme o tipo de pessoa que tá usando o app:

import { Menu } from "@/components/Menu";
import { AdminPage } from "@/components/AdminPage";
import { ModeratorPage } from "@/components/ModeratorPage";
import { UserPage } from "@/components/UserPage";
import { GuestPage } from "@/components/GuestPage";

// Atribui cada componente a uma chave do objeto
const LAYOUTS = {
  admin: AdminPage,
  moderator: ModeratorPage,
  user: UserPage,
  guest: GuestPage,
}

function HomePage(profile) {
  // Com base no perfil, busca o componente desejado
  const Component = LAYOUTS[profile];

  return (
   <div className="home-page">
    <Menu />
    {/* Renderiza o componente de forma clara e limpa */}
    <Component />
   </div>
  )
}

Este exemplo mostra como um JumpTable pode simplificar e organizar a lógica, eliminando a necessidade de repetidas verificações condicionais dentro do JSX.

Desvantagens

Embora o padrão JumpTable ofereça várias vantagens em termos de simplificação da lógica condicional e manutenção do código, ele também possui suas desvantagens e limitações.

Quando o JumpTable tem muitas entradas, isso pode afetar a performance, principalmente se não for bem otimizada. Esse problema pode aparecer mais em lugares com poucos recursos como dispositivos menos potentes por exemplo.

Para quem é novo ou não conhece bem o padrão JumpTable, o código pode parecer menos claro que o uso de if-else ou switch-case, tornando a aprendizagem mais difícil e podendo complicar um pouco a leitura e manutenção do código.

Embora o JumpTable torne o código mais simples, testá-lo pode ser mais difícil se as funções envolvidas forem complexas ou numerosas, exigindo testes individuais para cada função.

Conclusão

O JumpTable pode ser uma mão na roda, tanto para quem usa React quanto para quem tá no JavaScript puro. Ele torna tudo mais simples e objetivo.

No React, ele é ótimo para aplicar renderizações condicionais sem fazer uma bagunça. Já no JavaScript, ele organiza suas funções e o que elas devem fazer de uma maneira bem direta, te poupando de um monte de if-else ou switch-case.

Em qualquer um dos casos, usar o JumpTable deixa seu código mais organizado e fácil de pegar no tranco, sendo um verdadeiro herói para quem busca eficiência sem querer quebrar a cabeça.