Traducción en curso

 

Cuando construiste el juego "Adivina el número" en el artículo anterior, puede que te hayas dado con que no funcionaba. Tranquilo - este artículo apunta a brindarte algunos consejos simples acerca de cómo encontrar y reparar errores en programas de JavaScript, y de esta manera evitar que te arranques los cabellos ante problemas así.

Prerrequisitos:

Conocimientos básicos de computación, entendimiento básico de HTML y CSS, y entendimiento de lo que es JavaScript.

Objetivo: Ganar habilidad y confianza para comenzar a reparar problemas simples en tu propio código.

Tipos de errores

En general, cuando haces algo mal en programación, hay dos tipos de errores principales con los que te puedes encontrar:

  • Errores sintácticos: Son los errores de ortografía en tu código que provocan que tu programa no se ejecute en absoluto, o que deje de funcionar a mitad de camino - también te van a aparecer mensajes de error. Por lo general no es tan difícil corregirlos, ¡siempre y cuando conozcas las herramientas correctas y sepas qué significan los mensajes de error!
  • Errores lógicos: Estos son errores en donde la sintaxis es correcta pero el código no resulta lo que tu esperabas, lo cual significa que el programa se ejecuta de manera exitosa pero da resultados incorrectos. Éstos son más difíciles de arreglar que los errores sintácticos, ya que generalmente no hay ningún mensaje de error que te pueda orientar hacia la fuente del error.

Bueno, tampoco es que es así de simple - a medida que hurgues más a fondo, verás que hay algunos otros diferenciadores. Pero las clasificaciones de arriba vas a servirnos en esta etapa temprana de tu carrera. Vamos a examinar estos dos tipos mientras avanzamos.

Un ejemplo erróneo

Para comenzar, volvamos a nuestro juego de adivinar el número - excepto que esta vez vamos a explorar una versión que tiene insertados algunos errores de manera deliberada. Ve a Github y hazte una copia local de number-game-errors.html (puedes verlo ejecutado en vivo aquí).

  1. Para comenzar, abre la copia local dentro de tu editor de texto favorito, y tu navegador.
  2. Intenta Jugar el juego - notarás que cuando presionas "Enviar Intento" ("Submit guess"), no funciona!

Nota: Puede suceder que tengas tu propia versión de ejemplo del juego que no funcione y que quieras arreglar. Igualmente nos gustaría que en este artículo trabajes con nuestra versión para que puedas aprender las técnicas que estamos enseñando aquí. Luego puedes regresar y tratar de arreglar tu ejemplo.

En este punto, consultemos la consola de desarrollador para ver si podemos ver algún error de sintaxis y, luego, tratar de corregirlo. Abajo aprenderás cómo.

Arreglando errores sintácticos

Anteriormente en este curso, te hicimos escribir algunos comandos simples de JavaScript en la consola JavaScript de herramientas de desarrollador (si no te acuerdas cómo abrirlo en tu navegador, sigue el enlace). Algo aún más útil es que la consola te brinda mensajes de error cada vez que ocurre algún error sintáctico dentro del JavaScript que alimenta el motor JavaScript del buscador. Ahora, vamos a la caza.   

  1. Ve a la pestaña donde tienes abierto number-game-errors.html, y abre tu consola JavaScript. Deberías ver un mensaje de error a lo largo de las siguientes líneas:   
  2. Éste es un error bastante fácil de rastrear, y el navegador te da varios pedacitos de información útiles para ayudarte (la captura de pantalla de arriba es de Firefox, pero otros navegadores proveen información similar). De izquierda a derecha, tenemos:   
  • Una "x" roja para indicar que ésto es un error.
  • Un mensaje de error que indica qué fue lo que salió mal: "TypeError: guessSubmit.addeventListener is not a function"
  • Un enlace de "Aprenda más"("Learn more") que conecta con una página de MDN que explica de manera bien detallada qué significa este error.
  • El nombre del archivo JavaScript, que conecta con la pestaña del Depurador de DevTools. Si sigues este enlace, verás la línea exacta donde el error está resaltado.
  • El número de línea donde está el error, y el número de caracter de esa línea donde el error se observa por primera vez. En este caso, tenemos línea 86, caracter número 3.  
  1. Si nos fijamos en la línea 86 de nuestro editor de código, encontraremos ésto:
    guessSubmit.addeventListener('click', checkGuess);
  2. El mensaje de error dice "guessSubmit.addeventListener is not a function", así que probablemente hemos escrito algo mal. Si no estás seguro de cómo se escribe algún segmento sintáctico , siempre es buena idea buscar la función en MDN. La mejor forma de hacerlo es, en tu navegador favorito, buscar "nombre-de-función". Aquí tienes un atajo para ahorrarte algo de tiempo en esta ocasión: addEventListener().  
  3. Entonces, viendo esta página, parece que el error es que hemos escrito mal el nombre de la función! Recuerda que JavaScript distingue mayúsculas de minúsculas, así que la más mínima diferencia de ortografía o tipografía va a provocar un error. Cambiar addeventListener por addEventListener debería solucionarnos el problema. Hazlo ahora.  

Nota: Héchale un vistazo a nuestra página de referencia TypeError: "x" is not a function  para más detalles acerca de este error.

Errores sintácticos: segunda ronda

  1. Guarda tu página y refresca, y verás que el error ya no está. 
  2. Ahora, si tratas de ingresar un intento y presionas el botón de enviar, verás... ¡otro error! 
  3. Esta vez, el error que se reporta es "TypeError: lowOrHi is null", en la línea 78.
    Nota: Null es un valor especial que significa "nada" o "sin valor", así que lowOrHi ha sido declarada e inicializada, pero no con ningún valor significativo - no tiene ningún tipo o valor.  
    Nota: Este error no apareció apenas se cargó la página porque ocurrió dentro de una función (dentro del bloque checkGuess() { ... }). Como ya aprenderás pronto más en detalle en nuestro artículo acerca de funciones, el código dentro una función se ejecuta con un alcance diferente del código fuera de una función. En este caso, el código no fue ejecutado y el error no saltó sino hasta que la función checkGuess() fue ejecutada por la línea 86.  
  4. Fíjate en la línea 78 y verás el siguiente código: 
    lowOrHi.textContent = 'Last guess was too high!';
  5. Esta línea está tratando de fijar la propiedad textContent de la variable lowOrHi a una cadena de texto, pero no está funcionando porque lowOrHi no contiene lo que se supone que contenga. Veamos por qué - intenta encontrar otras instancias de lowOrHi en el código. La instancia más temprana que encontrarás en el JavaScript es en la línea 48:
    var lowOrHi = document.querySelector('lowOrHi');
  6. Acá estamos tratando de que la variable contenga una referencia a un elemento en el documento del HTML. Veamos si el valor es null después de que la línea ha sido ejecutada. Añade el siguiente código en la línea 49: 
    console.log(lowOrHi);

    Nota: console.log() es una función depuradora realmente útil que imprime un valor a la consola. Así que imprimirá el valor de lowOrHi a la consola en cuanto hayamos tratado de fijarlo en la línea 48.

  7. Guarda y refresca, y deberías ahora ver el resultado de console.log() en tu consola. Como era de esperar, el valor de lowOrHi es null en este punto, así que definitivamente hay un problema con la línea 48.

  8. Pensemos cúal podría ser el problema. La línea 48 está usando el método document.querySelector() para tener la referencia de un elemento al seleccionarlo con un selector CSS. Revisando más a fondo nuestro archivo, encontramos el párrafo en cuestión:
    <p class="lowOrHi"></p>
  9. Entonces, aquí necesitamos un selector CSS, que comienza con un punto (.), pero el selector del método querySelector() en la línea 48 no tiene ningún punto. ¡Ésto podría ser un problema! Intenta cambiar de lowOrHi a .lowOrHi en la línea 48.
  10. Prueba de guardar y refrescar nuevamente, y tu declaración console.log() debería traerte el elemento <p> que queremos. ¡Uf! Otro error corregido! Ahora puedes borrar tu línea console.log(), o guardarla como referencia para luego - como tú quieras. 

Nota: Visita nuestra página de referencia TypeError: "x"is (not) "y" para más detalles acerca de este error.

Errores sintácticos: Tercera ronda

  1. Si intentas ahora jugar nuevamente, te debería ir un poco mejor - el juego se debería poder jugar perfectamente bien hasta el final, ya sea porque acertaste con el número correcto o porque te quedaste sin vidas.
  2. En este punto, el juego falla una vez más y nos tira el mismo error que obtuvimos al comienzo - "TypeError: resetButton.addeventListener is not a function". Sin embargo, esta vez figura que el error proviene de la línea 94.
  3. Revisando la línea 94, es fácil ver que aquí cometimos el mismo error. Nuevamente tenemos que cambiar addevent.Listener por addEventListener. Hazlo ahora.

Un error de lógica

A esta altura, el juego se debería poder jugar bien; sin embargo, después de haber jugado un par de veces notarás, indudablemente, que el número "al azar" que debes adivinar es siempre 0 o 1. ¡No es precisamente así la manera en que queremos jugar!

En algún lugar hay, obviamente, un error en la lógica del juego - el juego no nos tira ningún error, simplemente no está jugando bien.

  1. Busca la variable randomNumber y las líneas donde se estableció por primera vez el número al azar. La instancia que almacena el número al azar que queremos adivinar al comienzo del juego debería estar alrededor de la línea número 44:
    var randomNumber = Math.floor(Math.random()) + 1;
    Y la que genera el número al azar antes de cada juego subsecuente está alrededor de la línea 113:
    randomNumber = Math.floor(Math.random()) + 1;
  2. Para verificar si estas líneas son, en efecto, el problema, vayamos nuevamente con nuestra amiga console.log() - inserta la siguiente línea directamente debajo de cada una de las dos líneas anteriores.

    console.log(randomNumber);
  3. Guarda y refresca, y luego juega un par de veces - verás que randomNumber es igual a 1 en cada punto en donde está conectado a la consola.

Desentrañando la lógica

Para arreglar ésto, consideremos cómo está funcionando esta línea. Primero, invocamos Math.floor(), que genera un número decimal al azar entre 0 y 1, por ejemplo: 0.5675493843.

Math.random()

A continuación, pasamos el resultado de invocar Math.random() a través de Math.floor(), que redondea el número al entero más cercano. Luego agregamos 1 a ese resultado:  

Math.floor(Math.random()) + 1

Redondear un número decimal al azar entre 0 y 1 siempre va a resultar en 0, así que si le agregamos 1, siempre va a resultar en 1. Necesitamos multiplicar el número al azar por 100 antes de redondearlo. Hacerlo nos daría un número al azar entre 0 y 99:

Math.floor(Math.random()*100);

Por consiguiente, si queremos agregar 1 para que nos dé un número al azar entre 1 y 100:

Math.floor(Math.random()*100) + 1;

Intenta cambiar ambas líneas, luego guárdalas y refresca - ¡el juego debería ahora funcionar de la manera que queremos!

Otros errores comunes

Hay otros errores comunes que encontrarás en tu código. En ésta sección te resaltamos la mayoría de ellos.

SyntaxError: missing ; before statement

Este error generalmente significa que te salteaste un punto y coma al final de una de tus líneas de código, pero a veces puede ser más críptico. Por ejemplo, si cambiamos esta linea dentro de la función checkGuess():

var userGuess = Number(guessField.value);

a

var userGuess === Number(guessField.value);

Ésto nos tira un error porque piensa que estás tratando de hacer algo diferente. Deberías asegurarte de no confundir el operador de asignación (=) - que fija la variable para que sea igual a un valor - con el operador de igualdad estricta (===), testea si un valor es igual a otro, y tira un resultado verdadero/falso.

Nota: Visita nuestra página de referencia SintaxError: missing ; before statement para más detalles acerca de éste error.

El programa siempre dice que has ganado, más allá de lo que hayas ingresado

Ésto podría ser otro síntoma de haber confundido los operadores de asignación y de igualdad estricta. Por ejemplo, si fuésemos a cambiar esta línea dentro de checkGuess():

if (userGuess === randomNumber) {

a

if (userGuess = randomNumber) {

el test siempre resultaría verdadero, lo que provocaría que el programa reporte que se ha ganado el juego. ¡Ten cuidado!

SyntaxError: missing ) after argument list

Éste es bastante simple - generalmente significa que te ha faltado cerrar paréntesis al final de una llamada de función o método.

Nota: Visita nuestra página de referencia SyntaxError: missing ) after argument list para más detalles acerca de éste error.

SyntaxError: missing : after property id

Este error generalmente se relaciona con un objeto JavaScript formado de manera incorrecta, pero en este caso lo obtuvimos al cambiar

function checkGuess() {

por

function checkGuess( {

Ésto provocó que el navegador pensara que estamos tratando de pasar los contenidos de la función a la función como un argumento. ¡Ten cuidado con esos paréntesis!

SyntaxError: missing } after function body

Éste es fácil - generalmente significa que te ha faltado poner una de las llaves de una función o estructura condicional. Nos dio este error al borrar una de las llaves hacia el final de la función checkGuess().  

SyntaxError: expected expression, got 'string' or SyntaxError: unterminated string literal

Estos errores generalmente significan que te ha faltado las comillas de apertura o de cierre del valor de una cadena. En el primer error de arriba, string (cadena) se reemplazaría con el/los caracter/es que el navegador encontró en lugar de una comilla al comienzo de una cadena- El segundo error significa que la cadena no ha sido finalizada con una comilla.

Para todos estos errores, piensa acerca de cómo resolvimos los ejemplos que trabajamos en la guía. Cuando surja algún error, fíjate en el número de línea que se te indica, ve a esa línea y fíjate si puedes darte cuenta de lo que está mal. Ten en cuenta que el error no necesariamente se va a encontrar en esa línea, ni puede que haya sido causado por exactamente el mismo problema que mencionamos antes.

Nota: Visita nuestras páginas de referencia SyntaxError: Unexpected token y SyntaxError: unterminated string literal para conocer acerca de estos errores más en detalle.

Resumen

Así que ahí lo tenemos, conocimientos básicos para resolver errores en programas simples en JavaScript. No siempre va a ser así de fácil darse cuenta de qué está mal con tu código, pero al menos esto te quitará menos horas de sueño y te permitirá avanzar un poco más rápido cuando las cosas no salen bien en tu camino de aprendizaje.

Te puede servir

  • Hay muchos otros tipos de errores que no están listados aquí; estamos compilando una referencia que explica detalladamente qué significan - Visita la Referencia de errores en JavaScript.
  • Si te topas dentro de tu código con algún error que no estás seguro de cómo arreglarlo despues de haber leído este artículo, ¡Puedes obtener ayuda! Pregunta en el Hilo de discusión del área de aprendizaje, o en el canal IRC #mdn en Mozilla IRC. Cuéntanos cuál es es error que has obtenido y nosotros trataremos de ayudarte. Un listado de tu código también nos sería de utilidad.

Etiquetas y colaboradores del documento

Colaboradores en esta página: NataliaCba, esencialinux
Última actualización por: NataliaCba,