Escribir código JavaScript puede ser un desafío y, a veces, francamente intimidante, como saben muchos desarrolladores. En el proceso de trabajo inevitablemente surgen errores y algunos de ellos se repiten con frecuencia. Este artículo, dirigido a desarrolladores novatos, habla sobre estos errores y cómo solucionarlos. Para mayor claridad, los nombres de funciones, propiedades y objetos se toman de . Todo esto le ayuda a recordar rápidamente cómo corregir errores comunes.
Recordamos: para todos los lectores de "Habr": un descuento de 10 rublos al inscribirse en cualquier curso de Skillbox utilizando el código promocional "Habr".
Skillbox recomienda: Curso práctico .
TypeError: la propiedad no está 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 código de ejemplo anterior arroja el error Uncaught TypeError: No se puede leer la propiedad 'afortunada' de undefinido. El problema es que el objeto niña no tiene una propiedad con nombre, aunque sí tiene una propiedad con nombre. Y como la propiedad girl.named no está definida, no puedes acceder a ella, porque formalmente no existe. Pero si reemplazas girl.named.lucky con girl.name, todo funcionará y el programa devolverá Lucky.
Puedes conocer más sobre las propiedades. .
Cómo resolver errores de tipo
Los errores de tipo ocurren cuando un programador intenta realizar acciones sobre datos que no coinciden con un tipo específico. Los ejemplos incluyen el uso de .bold(), solicitar una propiedad indefinida o llamar a una función que en realidad no es una función.
Entonces, si intenta llamar a girl(), obtendrá el error Uncaught TypeError: yourVariable.bold no es una función y girl no es una función, porque en realidad se llama a un objeto, no a una función.
Para eliminar errores, es necesario estudiar las variables. Entonces, ¿qué es una niña? ¿Cómo se llama niña? Puede averiguarlo analizando el código, mostrando variables usando console.log, el comando del depurador o llamando al nombre de la variable en la consola. Debe asegurarse de que sea posible operar con el tipo de datos contenidos en la variable. Si no encaja, cámbielo, por ejemplo, agregue una condición o bloque try..catch y obtenga control sobre la ejecución de la operación.
Desbordamiento de pila
Si crees en los autores de la letra de la canción Baby One More Time (esta es Britney Spears, sí), entonces la palabra hit en este contexto significa el deseo de la cantante de ser llamada nuevamente (aquí hay una explicación del contexto mismo de la canción). canción - nota del traductor). Es muy posible que este deseo conduzca a un aumento del número de llamadas en la vida real. Pero en programación, esta es una recursividad que puede causar un error si la pila de llamadas se desborda.
Los errores se ven así:
Error: Sin espacio en la pila (Edge)
InternalError: demasiada recursividad (Firefox)
RangeError: se excedió el tamaño máximo de la pila de llamadas (Chrome)
Se produce un desbordamiento de pila si el desarrollador no considera el caso base en la recursividad o si el código no aborda el 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 falso, por lo que se llamará a oneMoreTime cada vez, pero la función nunca se completará.
Si empiezas a depender de dos amigos, esto reducirá la soledad y no tendrás que esperar una llamada.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness--
stillBelieve = false
return oneMoreTime(stillBelieve, loneliness)
}Un ejemplo son los casos con bucles infinitos, cuando el sistema no genera un mensaje de error, pero la página en la que se ejecuta el código JavaScript simplemente se congela. Esto sucede si el bucle while no tiene una condición de terminación.
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
}Puedes resolver el problema de la siguiente manera:
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
worldEnded = true
}Depuración de bucles infinitos y recursiones
Si tiene un problema de bucle infinito, debe cerrar la pestaña en Chrome o Edge y cerrar la ventana del navegador en Firefox. Después de esto, debes analizar cuidadosamente el código. Si no puede encontrar el problema, vale la pena agregar un comando de depuración a su bucle o función y verificar los valores de las variables. Si el resultado no corresponde al esperado, entonces lo reemplazamos, esto se puede hacer fácilmente.
En el ejemplo anterior, se debe agregar el depurador como la primera línea de la función o bucle. Luego debes abrir la pestaña de depuración en Chrome, analizando las variables dentro del alcance. Usando el botón siguiente puede realizar un seguimiento de sus cambios con cada iteración. Todo esto es fácil de hacer y en la mayoría de los casos se encuentra el problema.
Puedes leer más sobre todo esto aquí () y aquí ().
Error de sintaxis
Uno de los errores más comunes en JavaScript es SyntaxError. Las extensiones del editor de texto te ayudarán a evitarlas. Por ejemplo, Bracket Pair Colorizer marca los corchetes en el código con diferentes colores, y Prettier o una herramienta de análisis similar permite encontrar errores rápidamente. La mejor opción para reducir la probabilidad de que se produzca un error de sintaxis es el anidamiento mínimo.
Comparte en los comentarios: ¿qué haces para prevenir errores o detectarlos y eliminarlos rápidamente?
Skillbox recomienda:
- Curso práctico de dos años. .
- Curso por Internet .
- curso práctico anual .
Fuente: habr.com