A veces escribir código JavaScript es difícil, y a veces solo da miedo, lo cual es familiar para muchos desarrolladores. En el proceso, inevitablemente surgen errores, y algunos de ellos a menudo se repiten. El artículo, diseñado para desarrolladores novatos, habla sobre estos errores y cómo resolverlos. Para mayor claridad, los nombres de funciones, propiedades y objetos se toman de una
canción popular . Todo esto ayuda a recordar rápidamente cómo solucionar errores comunes.
Le recordamos: para todos los lectores de "Habr": un descuento de 10.000 rublos al registrarse en cualquier curso de Skillbox con el código de promoción "Habr".
Skillbox recomienda: Curso práctico "Mobile Developer PRO" .
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 código de ejemplo anterior arroja un Error de tipo no capturado: no se puede leer la propiedad 'afortunada' de error indefinido. El problema es que el objeto chica no tiene una propiedad con nombre, aunque hay una propiedad con nombre. Y dado que la propiedad girl.named no está definida, es imposible acceder a ella, porque formalmente no existe. Pero si reemplaza girl.named.lucky con girl.name, entonces todo funcionará y el programa devolverá Lucky.
Lea más sobre las propiedades
aquí .
Métodos para corregir errores TypeError
Los errores de TypeError ocurren cuando un programador intenta realizar acciones en datos que no coinciden con un tipo particular. Como ejemplo, use .bold (), solicite una propiedad indefinida o llame a una función que no sea realmente una función.
Por lo tanto, si intenta llamar a girl (), aparecerá un error Uncaught TypeError: yourVariable.bold no es una función y girl no es una función, porque de hecho se llama al objeto, no a la función.
Para eliminar errores, debe estudiar las variables. Entonces, ¿qué es niña? ¿Y qué es girl.named? Puede averiguar si analiza el código, muestra las variables usando console.log with, el comando depurador o llamando al nombre de la variable en la consola. Debe asegurarse de que sea posible operar con el tipo de datos que contiene la variable. Si no encaja, cámbielo, por ejemplo, agregue una condición o intente ... bloque de captura y obtenga control sobre la operación.
Desbordamiento de pila
Si crees en los autores de las palabras de la canción Baby One More Time (esta es Britney Spears, eh), entonces la palabra hit en este contexto significa el deseo del cantante de ser llamado nuevamente (aquí hay una explicación del contexto de la canción, aprox. Traductor). Bien puede ser que este deseo conduzca a un aumento en el número de llamadas en la vida real. Pero en la programación, esta es una recursión que puede causar un error si la pila de llamadas se desborda.
Los errores son los siguientes:
Error: sin espacio de pila (Edge)
InternalError: demasiada recursividad (Firefox)
RangeError: tamaño máximo de pila de llamadas excedido (Chrome)
El desbordamiento de pila ocurre si el desarrollador no tuvo en cuenta el caso base en la recursividad, o si el código no aborda el caso proporcionado.
function oneMoreTime(stillBelieve=true, loneliness=0) { if (!stillBelieve && loneliness < 0) return loneliness++ return oneMoreTime(stillBelieve, loneliness) }
En este caso, stillBelieve nunca se puede establecer en falso, por lo que se llamará a oneMoreTime cada vez, pero la función nunca finalizará.
Si comienza a esperar dos amigos, esto reducirá la soledad (soledad) y no puede esperar la llamada.
function oneMoreTime(stillBelieve=true, loneliness=0) { if (!stillBelieve && loneliness < 0) return loneliness-- stillBelieve = false return oneMoreTime(stillBelieve, loneliness) }
Como ejemplo, hay casos con bucles infinitos, cuando el sistema no da un mensaje de error, y la página en la que se ejecuta el código JavaScript simplemente se congela. Esto sucede si el ciclo while no tiene una condición de terminación.
let worldEnded = false while (worldEnded !== true) { console.log("Keep on dancin' till the world ends") }
Puede resolver el problema de la siguiente manera:
let worldEnded = false while (worldEnded !== true) { console.log("Keep on dancin' till the world ends") worldEnded = true }
Depure bucles y recursiones interminables
Si tiene un problema con un bucle infinito, en Chrome o Edge necesita cerrar la pestaña, y en Firefox, cierre la ventana del navegador. Después de eso, debe analizar cuidadosamente el código. Si no puede encontrar el problema, debe agregar el comando del depurador al bucle o función y verificar el valor de las variables. Si el resultado no es el esperado, reemplácelo, se puede hacer fácilmente.
En el ejemplo anterior, el depurador debe agregarse como la primera línea de una función o bucle. Luego, debe abrir la pestaña de depuración en Chrome analizando las variables en el alcance. Usando el siguiente botón, puede seguir su cambio en cada iteración. Hacer todo esto es simple, y en la mayoría de los casos el problema es.
Puede leer más sobre todo esto aquí (
para Chrome ) y aquí (
para Firefox ).
Error de sintaxis
Uno de los errores de JavaScript más comunes es SyntaxError. Evítalos ayuda extensión editor de texto. Por lo tanto, el colorizador de par de corchetes marca los corchetes en el código en diferentes colores, y Prettier o una herramienta de análisis similar permite encontrar rápidamente errores. La mejor opción para reducir la probabilidad de SyntaxError es un anidamiento mínimo.
Comparta en los comentarios: ¿qué hace para evitar errores o detectarlos y eliminarlos rápidamente?
Skillbox recomienda: