A veces, escribir código en JavaScript es complicado, y otras veces puede resultar intimidante, algo que muchos desarrolladores conocen bien. Durante el proceso de trabajo, inevitablemente surgen errores, y algunos de ellos ocurren con frecuencia. Este artículo, dirigido a desarrolladores principiantes, aborda estos errores y las formas de solucionarlos. Para mayor claridad, los nombres de funciones, propiedades y objetos se han tomado de . Todo esto ayuda a recordar rápidamente cómo corregir errores comunes.
Recordamos: para todos los lectores de «Habr» — un descuento de 10,000 rublos al registrarse en cualquier curso de Skillbox usando el código promocional «Habr».
Skillbox recomienda: Curso práctico .
TypeError: propiedad no definida
let girl = {
name: "Lucky",
location: "Hollywood",
profession: "star",
thingsMissingInHerLife: true,
lovely: true,
cry: function() {
return "cry, cry, cries in her lonely heart"
}
}
console.log(girl.named.lucky)El ejemplo de código mencionado anteriormente genera el error Uncaught TypeError: Cannot read property ‘lucky’ of undefined. El problema es que el objeto girl no tiene la propiedad named, aunque sí tiene la propiedad name. Dado que la propiedad girl.named no está definida, no se puede acceder a ella, ya que formalmente no existe. Pero si se reemplaza girl.named.lucky por girl.name, funcionará y el programa devolverá Lucky.
Más sobre las propiedades se puede .
Métodos para resolver errores TypeError
Los errores TypeError ocurren cuando un programador intenta realizar acciones con datos que no corresponden al tipo definido. Como ejemplo, se puede considerar el uso de .bold(), solicitar una propiedad undefined o llamar a una función que en realidad no es una función.
Así, si se intenta llamar a girl (), aparecerá el error Uncaught TypeError: yourVariable.bold is not a function y girl is not a function, ya que en realidad se está llamando a un objeto y no a una función.
Para solucionar errores, es necesario examinar las variables. Así, ¿qué es girl? ¿Y qué es girl.named? Esto se puede averiguar analizando el código, imprimiendo las variables usando console.log con el comando debugger o llamando el nombre de la variable en la consola. Debe asegurarse de que se puede operar con el tipo de dato que contiene la variable. Si no es adecuado, cámbielo, por ejemplo, añadiendo una condición o un bloque try..catch — y obtendrá control sobre la ejecución de la operación.
Desbordamiento de pila
Si creemos a los autores de la canción Baby One More Time (es Britney Spears, ¿verdad?), la palabra hit en este contexto significa el deseo de la cantante de que le llamen una vez más (esto es una aclaración del contexto de la canción, nota del traductor). Es muy posible que este deseo provoque un aumento en la cantidad de llamadas en la vida real. Pero en programación, esto es recursión, que puede provocar un error en caso de desbordamiento de la pila de llamadas.
Los errores aparecen de la siguiente manera:
Error: Fuera del espacio de la pila (Edge)
InternalError: demasiada recursión (Firefox)
RangeError: Se excedió el tamaño máximo de la pila de llamadas (Chrome)
El desbordamiento de la pila ocurre si el desarrollador no tomó en cuenta el caso base en la recursión o si el código no se refiere al caso previsto.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness++
return oneMoreTime(stillBelieve, loneliness)
}En este caso, stillBelieve nunca puede ser false, por lo que cada vez se llamará a oneMoreTime, pero la ejecución de la función nunca se completará.
Sin embargo, si comenzamos a confiar en dos amigos, esto reducirá la soledad, y la llamada podría no ser necesaria.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness--
stillBelieve = false
return oneMoreTime(stillBelieve, loneliness)
}Como ejemplo, se pueden dar casos de bucles infinitos, cuando el sistema no muestra un mensaje de error y la página donde se ejecuta el código JavaScript simplemente se congela. Esto ocurre si un bucle while no tiene una condición de salida.
let worldEnded = false
while (worldEnded !== true) {
console.log("Sigue bailando hasta que el mundo acabe")
}La solución al problema se puede hacer de la siguiente manera:
let worldEnded = false
while (worldEnded !== true) {
console.log("Sigue bailando hasta que el mundo acabe")
worldEnded = true
}Depuración de bucles infinitos y recursiones
Si hay un problema con un bucle infinito, en Chrome o Edge es necesario cerrar la pestaña, y en Firefox, la ventana del navegador. Después de esto, se debe analizar minuciosamente el código. Si no se logra encontrar el problema, se recomienda agregar el comando debugger en el bucle o función y verificar el valor de las variables. Si el resultado no coincide con lo esperado, se reemplaza; esto se puede hacer fácilmente.
En el ejemplo mencionado anteriormente, el depurador debe añadirse como la primera línea de la función o el ciclo. Luego, hay que abrir la pestaña de depuración en Chrome y analizar las variables en el ámbito. Con el botón 'next', se pueden rastrear sus cambios en cada iteración. Hacer todo esto es sencillo y, en la mayoría de los casos, el problema se encuentra.
Para leer más sobre todo esto, puedes consultar aquí () y aquí ().
Error de sintaxis
Uno de los errores más comunes en JavaScript es el SyntaxError. Las extensiones del editor de texto pueden ayudar a evitarlos. Por ejemplo, Bracket Pair Colorizer resalta los paréntesis en el código de diferentes colores, mientras que Prettier o una herramienta de análisis similar permite encontrar errores rápidamente. La mejor opción para reducir la probabilidad de un SyntaxError es mantener una mínima profundidad de anidamiento.
Comparte en los comentarios: ¿qué haces para evitar errores o detectarlos y solucionarlos rápidamente?
Skillbox recomienda:
- Curso práctico de dos años .
- Curso en línea .
- Curso práctico de un año .
Fuente: habr.com
