Tema 23 · JS Moderno

Manejo de Errores con try...catch

Aprende a capturar excepciones en tiempo de ejecución con try, catch y finally, y a lanzar errores personalizados con la instrucción throw para crear aplicaciones web robustas.

Persistencia con localStorage y sessionStorage Formato JSON y Módulos ES (import/export)

¿Por qué manejar errores?

Cuando ocurre un error no capturado en JavaScript, la ejecución de la aplicación se interrumpe abruptamente y el usuario se queda con una pantalla congelada o rota. La estructura try...catch permite interceptar estos fallos y recuperarse de forma elegante.

La Estructura try...catch...finally

Bloque Función Obligatorio
try { ... } Contiene el código susceptible de fallar o lanzar una excepción. Sí
catch (error) { ... } Se ejecuta únicamente si ocurre un error en el bloque try. Recibe el objeto del error. Opcional (si hay finally)
finally { ... } Se ejecuta siempre, tanto si hubo éxito como si ocurrió un error. Ideal para liberar recursos. Opcional

Lanzar Errores con throw

Puedes generar excepciones personalizadas utilizando la sentencia throw junto con la clase Error: 

function dividir(a, b) {
  if (b === 0) {
    throw new Error("División por cero no permitida en matemáticas reales.");
  }
  return a / b;
}

try {
  const resultado = dividir(10, 0);
  console.log("Resultado:", resultado);
} catch (error) {
  console.error(`[Error de cálculo]: ${error.message}`);
} finally {
  console.log("Operación de división concluida.");
}

⚡ Validador de Entrada Robusto con Captura de Errores

Prueba introducir edades no válidas y observa cómo try/catch atrapa la excepción sin romper el programa:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Manejo de Errores en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-error { max-width: 480px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .form-group { margin-bottom: 12px; }
    label { display: block; margin-bottom: 6px; font-weight: 600; color: #0f172a; font-size: 0.9rem; }
    input[type="text"] { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 6px; }
    button { padding: 9px 16px; background: #0284c7; color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
    button:hover { background: #0369a1; }
    .alerta { margin-top: 15px; padding: 12px; border-radius: 6px; font-size: 0.9rem; }
    .alerta-ok { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
    .alerta-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
    .traza-log { font-family: monospace; font-size: 0.8rem; margin-top: 10px; color: #64748b; }
  </style>
</head>
<body>

  <div class="card-error">
    <h3 style="margin-top: 0; color: #0f172a;">Validador de Edad Académica</h3>

    <div class="form-group">
      <label for="campo-edad">Ingresa tu edad (entre 14 y 100 años):</label>
      <input type="text" id="campo-edad" placeholder="Ej: 24">
    </div>

    <button onclick="validarEdad()">Validar con try...catch</button>

    <div id="caja-resultado"></div>
    <div class="traza-log" id="log-consola"></div>
  </div>

  <script>
    function procesarEdad(valorTexto) {
      if (valorTexto === "") {
        throw new Error("El campo no puede estar vacío.");
      }

      const edad = Number(valorTexto);

      if (isNaN(edad)) {
        throw new Error(`"${valorTexto}" no es un número válido.`);
      }

      if (edad < 14) {
        throw new Error("Debes tener al menos 14 años para acceder a los cursos.");
      }

      if (edad > 100) {
        throw new Error("La edad ingresada supera el límite máximo permitido.");
      }

      return edad;
    }

    function validarEdad() {
      const input = document.getElementById('campo-edad');
      const resultado = document.getElementById('caja-resultado');
      const log = document.getElementById('log-consola');

      resultado.className = "alerta";
      log.textContent = "";

      try {
        // Bloque protegido
        const edadAprobada = procesarEdad(input.value.trim());

        resultado.className = "alerta alerta-ok";
        resultado.innerHTML = `✓ <strong>¡Registro Aceptado!</strong> Edad válida: ${edadAprobada} años.`;
        log.textContent = `[try]: Ejecución exitosa sin anomalías.`;

      } catch (error) {
        // Captura de excepción
        resultado.className = "alerta alerta-error";
        resultado.innerHTML = `✕ <strong>Excepción Capturada:</strong> ${error.message}`;
        log.textContent = `[catch]: ${error.name} -> ${error.message}`;

      } finally {
        log.textContent += ` | [finally]: Auditoría completada a las ${new Date().toLocaleTimeString()}.`;
      }
    }
  </script>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.