¿Qué es el error 'Uncaught ReferenceError: [variable] is not defined' en JavaScript?

El error ReferenceError en JavaScript es uno de los problemas más comunes a los que nos enfrentamos los desarrolladores. Ocurre cuando el motor de JavaScript intenta acceder a una variable o función que no ha sido declarada previamente en el ámbito actual o que no se encuentra accesible en el contexto de ejecución.

Causas principales del ReferenceError

Identificar la raíz del problema es fundamental para aplicar la solución correcta. Las causas más frecuentes incluyen:

• Intentar usar una variable antes de declararla con let, const o var.
• Errores de tipeo o faltas de ortografía en el nombre de la variable o función.
• Intentar acceder a una variable local desde fuera de su función o bloque de código (problemas de scope).
• Importar o cargar scripts en el orden incorrecto en el archivo HTML, provocando que una librería externa no esté disponible.

Método 1: Verificar la declaración y el ámbito de la variable

La causa más simple es el uso de una variable sin haberla inicializado correctamente. Asegúrate de declarar siempre tus variables antes de utilizarlas.

Código incorrecto:

Código corregido:

Método 2: Comprobar el orden de carga de los scripts en HTML

Si estás desarrollando para el navegador y utilizas librerías externas o scripts propios, el error suele aparecer porque intentas ejecutar código antes de que el archivo correspondiente se haya cargado en el DOM.

1. Abre tu archivo HTML principal.
2. Revisa la sección <head> o el final del <body>.
3. Asegúrate de colocar el atributo defer o async en tus etiquetas <script>, o simplemente mueve tus scripts al final del cuerpo HTML para garantizar que los elementos existan.

Ejemplo con defer:

Método 3: Depurar con las Herramientas de Desarrollador (DevTools)

Utiliza las herramientas de depuración de tu navegador para rastrear exactamente dónde se origina el fallo.

1. Presiona F12 o haz clic derecho y selecciona 'Inspeccionar' en tu navegador.
2. Dirígete a la pestaña Console (Consola).
3. Haz clic sobre el enlace del archivo y número de línea que aparece a la derecha del error ReferenceError para abrir el depurador y corregir el nombre o la falta de declaración en tu código fuente.