Reemplazar if/else y switch en JavaScript y React

En proyectos modernos con JavaScript, TypeScript o React, es común encontrarse con bloques largos de if/else o switch. A medida que la aplicación crece, por ejemplo, un SaaS, un e-commerce o un panel administrativo— estos condicionales se vuelven difíciles de mantener y leer.

Una solución más limpia y escalable es reemplazar if/else y switch con un mapa de objetos, también conocido como Object Lookup Pattern.

---

Por qué evitar if/else y switch en JavaScript

Considera un SaaS con distintos roles de usuario: admin, editor y viewer. Cada rol necesita acceder a una ruta diferente en el dashboard.

Ejemplo con if/else

function getDashboardUrl(role: string): string {
  if (role === "admin") {
    return "/admin/dashboard"
  } else if (role === "editor") {
    return "/editor/content"
  } else if (role === "viewer") {
    return "/viewer/home"
  } else {
    return "/login"
  }
}

Cada nuevo rol agrega más líneas de código y complica la legibilidad.

La alternativa: Object Lookup Pattern

function getDashboardUrl(role: string): string {
  const routes: Record<string, string> = {
    admin: "/admin/dashboard",
    editor: "/editor/content",
    viewer: "/viewer/home",
  }

  return routes[role] ?? "/login"
}

Ventajas

• Código más legible y limpio.
• Escalable: agregar un nuevo rol solo requiere añadir una clave.
• Mantenible: modificar rutas es más simple que cambiar bloques de condicionales.

Beneficios de reemplazar switch y if/else en JS

• Legibilidad: permite ver todas las opciones en un solo lugar.
• Escalabilidad: ideal para SaaS con roles, planes o estados dinámicos.
• Compatibilidad con TypeScript: usando Record, puedes tipar claves y valores y evitar errores.
• Útil en React: facilita renderizar componentes diferentes según un estado o valor.

Ejemplo real en un SaaS: estados de suscripción

Con switch (menos recomendable)

function getSubscriptionLabel(status: string): string {
  switch (status) {
    case "trial":
      return "Período de prueba"
    case "active":
      return "Suscripción activa"
    case "canceled":
      return "Cancelada"
    default:
      return "Desconocido"
  }
}

Con Object Lookup (recomendado)

function getSubscriptionLabel(status: string): string {
  const labels: Record<string, string> = {
    trial: "Período de prueba",
    active: "Suscripción activa",
    canceled: "Cancelada",
  }

  return labels[status] ?? "Desconocido"
}

En React: reemplazando if/else en componentes

En un frontend, podemos renderizar vistas distintas según el estado de un pago (pending, success, failed).

const PaymentStatus = ({ status }: { status: "pending" | "success" | "failed" }) => {
  const views: Record<typeof status, JSX.Element> = {
    pending: <p>Tu pago está en proceso...</p>,
    success: <p>Pago confirmado</p>,
    failed: <p>Error en el pago</p>,
  }

  return views[status]
}

Esto mantiene el JSX limpio y evita un switch gigante.

Cuándo no usar Object Lookup

• Cuando las condiciones son complejas, por ejemplo:

if (user.age > 18 && user.isPremium) { ... }

• Cuando la lógica depende del contexto o cálculos dinámicos.
• Para casos muy simples (2 o 3 opciones), un if corto puede ser más claro.

Conclusión

Si buscas cómo reemplazar switch en JavaScript o la mejor alternativa a if/else en React, el Object Lookup Pattern es la solución:

• Más limpio y legible
• Fácil de mantener y escalar
• Ideal para roles, estados, planes o UI dinámica en React

Recuerda que no reemplaza todos los if. Para condiciones complejas, los condicionales tradicionales siguen siendo necesarios.

Cuando se trata de mapeo de claves a valores, este patrón simplifica tu código y lo hace mucho más mantenible.