Errores, depuración y almacenamiento

1.Los errores: tipos y causas

Todo programa tiene errores, y aprender a leerlos, controlarlos y encontrarlos es lo que separa a quien empieza de quien programa con soltura. JavaScript distingue varios tipos:

2.try, catch, finally y throw

try {
  // código que PUEDE fallar
  const datos = JSON.parse(texto);
  mostrar(datos);
} catch (error) {
  // qué hacer si falla
  console.error("No se pudo leer:", error.message);
} finally {
  // se ejecuta SIEMPRE, haya o no error (limpieza)
  ocultarCargando();
}

3.Depurar: encontrar el error

Depurar (*debugging*) es el arte de encontrar por qué algo no hace lo que esperas. El método siempre es el mismo:

1. Reproduce el problema de forma fiable.
2. Lee el mensaje de error y la línea que indica.
3. Formula una hipótesis: ¿qué valor creo que tiene cada variable aquí?
4. Compruébala con console.log o con el depurador.
5. Corrige una cosa y vuelve a probar.

Más allá de console.log

El depurador del navegador

Con F12 → pestaña Fuentes (*Sources*) puedes detener el programa en una línea y mirarlo desde dentro:

4.Guardar datos en el navegador: localStorage

Las variables desaparecen al recargar la página. Para conservar datos (una lista de tareas, una preferencia, un carrito) el navegador ofrece localStorage: un pequeño almacén de pares clave–valor que persiste aunque cierres el navegador.

5.Guardar con seguridad

1. Convierte con JSON al guardar y al leer.
2. Lee siempre con un valor por defecto: ?? [], porque la primera vez no hay nada.
3. Envuelve JSON.parse en try/catch: alguien puede haber alterado el dato.
4. Usa un nombre de clave con prefijo (miapp:tareas) para no chocar con otros datos.

const CLAVE = "miapp:tareas";

function leerTareas() {
  try {
    return JSON.parse(localStorage.getItem(CLAVE)) ?? [];
  } catch {
    return [];                        // dato corrupto: empezamos de cero
  }
}

function guardarTareas(tareas) {
  localStorage.setItem(CLAVE, JSON.stringify(tareas));
}

6.Organizar el código: módulos

Cuando un programa crece, un solo archivo de 800 líneas se vuelve inmanejable. Los módulos de ES dejan dividir el código en archivos con una responsabilidad cada uno, que exportan lo que ofrecen e importan lo que necesitan:

const CLAVE = "miapp:tareas";

export function leerTareas() { /* … */ }
export function guardarTareas(tareas) { /* … */ }
export const MAXIMO = 100;

export default function crearTarea(texto) {
  return { id: Date.now(), texto, hecha: false };
}

import crearTarea, { leerTareas, guardarTareas, MAXIMO } from "./tareas.js";

const tareas = leerTareas();
tareas.push(crearTarea("Estudiar módulos"));
guardarTareas(tareas);

<script type="module" src="js/app.js"></script>

• type="module" activa los módulos; ya se comporta como defer.
• Las variables de un módulo son privadas a él salvo que las exportes.
• Las rutas de import empiezan con ./ o ../ y llevan la extensión .js.
• Los módulos no funcionan abriendo el archivo directamente (file://): necesitas un servidor, por ejemplo la extensión Live Server del editor (funciona también en Cursor).

7.Hábitos de código limpio

• Nombres claros que digan qué hace o qué contiene cada cosa.
• Funciones pequeñas con una sola tarea.
• Evita los «números mágicos»: const MAXIMO_TAREAS = 100; en lugar de un 100 suelto.
• Una sola fuente de verdad: no repitas el mismo dato en dos sitios.
• Comenta el porqué, no lo evidente.
• Valida las entradas y trata los errores.
• Formatea con una herramienta (Prettier) y revisa con un linter (ESLint): encuentran errores antes de ejecutar.
• Activa el modo estricto ("use strict";, o usa módulos, que ya lo tienen): convierte fallos silenciosos en errores.

8.Errores frecuentes

• Guardar objetos sin JSON.stringify: acaban como "[object Object]".
• Olvidar el valor por defecto al leer: JSON.parse(null) da null y rompe lo que sigue.
• No usar try/catch con JSON.parse de datos externos.
• Atrapar un error y no hacer nada (catch {}): oculta los problemas. Al menos regístralo.
• Guardar secretos en localStorage.
• Depurar a ciegas: cambiar cosas al azar en vez de comprobar el valor de las variables.
• Abrir módulos con doble clic (file://) y sorprenderse por los errores de CORS.
• Modificar el estado y olvidar volver a guardarlo.

9.Glosario